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';
import {ListType} from "@/pages/production/list";


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

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

    const sxPreViewList: any[] = 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);
                // 接口返回多少秒调一次，默认10秒
                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 production-detail-box'}>
            <div className={'production-detail'}>
                <NavBar showBack={true} title={title}
                        style={{background: '#37425B'}}
                        isWhite={true}
                        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;