import React, {useEffect, useState} from 'react'
import './style.less'
import NavBar from '@/components/nav-bar'
import VideoPlay from '@/components/video-play'
import PdfPreview from '@/components/pdf-preview'
import {useSearchParams} from "react-router-dom";
import {getCarouselSettings} from "@/api/apiConfig";
import _ from 'lodash';
import { useNavigate } from 'react-router-dom';


const ProductionDetail: React.FC = () => {
    let navigate = useNavigate();
    const [title, setTitle] = useState<string>('');
    const [filePathItem, setFilePathItem] = useState();
    // 自动预览 定时器
    const [preViewTimer, setPreViewTimer] = useState<any>(null);

    // // 因是hook，必须写在组件的顶部执行，useSearchParams() 返回的是数组
    const [params] = useSearchParams();
    // // 通过 get 方法获取目标参数
    const name = params.get("name") || "";

    const sxPreViewList = localStorage.getItem('sxPreViewListStorage') ? JSON.parse(localStorage.getItem('sxPreViewListStorage')) : [];

    useEffect(() => {
        if (sxPreViewList?.length) {
            const _isLoop = sxPreViewList?.length > 1;
            const loopPreView = (index: number, interval: number) => {
                setFilePathItem(sxPreViewList?.[index]);
                clearInterval(preViewTimer);
                // 3秒调一次
                let _preViewTimer = setInterval(() => {
                    index = index + 1;
                    if (index > sxPreViewList?.length - 1) {
                        index = 0;
                    }
                    setFilePathItem(sxPreViewList?.[index]);
                }, interval * 1000);
                setPreViewTimer(_preViewTimer);
            }
            if (_isLoop) {
                getCarouselSettings().then((res: any) => {
                    const interval = res?.carousel?.interval || 10;
                    loopPreView(0, interval);
                }).catch(() => {
                    loopPreView(0, 10)
                })
            } else {
                setFilePathItem(sxPreViewList?.[0]);
            }
        }
    }, [JSON.stringify(sxPreViewList)])

    useEffect(() => {
        if (name) {
            setTitle(name)
        }
    }, [name])

    useEffect(() => {
        return () => {
            clearInterval(preViewTimer);
        };
    }, [])

    useEffect(() => {
        console.log('filePathItem', filePathItem)
        if (!_.isEmpty(filePathItem)) {
            setTitle(filePathItem?.name)
        }
    }, [filePathItem])



    return (
        <div className={'sxjx-content-main sxjx-layout-main-unfoot'}>
            <div className={'production-detail'}>
                <NavBar showBack={true} title={title} customBack={{onClick: () => {
                        const _url = localStorage.getItem('sxListPath');
                        navigate(_url, { replace: true });
                    }}}
                />
                {
                    filePathItem?.type === 'mp4' ? <div className={'production-detail-video-box'}>
                        <VideoPlay
                            key={filePathItem?.url}
                            url={filePathItem?.url || ''}
                            className={'production-detail-video'}
                        />
                    </div> : filePathItem?.type === 'pdf' ? <PdfPreview url={filePathItem?.url}/> : ''
                }
            </div>
        </div>
    )
}

export default ProductionDetail;