import React, {useEffect, useState} from 'react'
import './style.less'
import NavBar from '@/components/nav-bar'
import VideoPlay from '@/components/videoPlay'
import {useSearchParams} from "react-router-dom";
import { Document, Page, pdfjs } from "react-pdf";
import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
import 'react-pdf/dist/esm/Page/TextLayer.css';
import {getCarouselSettings} from "@/api/apiConfig";
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;


const ProductionDetail: React.FC = () => {
    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')) : [];

    console.log('sxPreViewList', sxPreViewList)

    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)
    }, [filePathItem])



    return (
        <div className={'sxjx-content-main sxjx-layout-main-unfoot'}>
            <div className={'production-detail'}>
                <NavBar showBack={true} title={title}/>
                {
                    filePathItem?.type === 'mp4' ? <div className={'production-detail-video-box'}>
                        <VideoPlay
                            key={filePathItem?.url}
                            url={filePathItem?.url || ''}
                            className={'production-detail-video'}
                        />
                    </div> : <>
                    </>
                }
            </div>
        </div>
    )
}

export default ProductionDetail;