import { videoUrlMessage } from "@/utils/compress"
import { ScissorOutlined } from "@ant-design/icons"
import { Button, Popover, Image } from "antd"
import React, { useState } from "react"
import style from './index.less'
import Lazyimg from "react-lazyimg-component"

interface Props {
    url: string,
    onChange?: (url: string) => void
}
/**
 * 获取oo视频帧序列
 * @returns 
 */
const VideoFrame: React.FC<Props> = ({ url, onChange }) => {
    
    /************************************/
    const [urlList, setUrlList] = useState<string[]>([])
    const [urlNum, seturlNum] = useState<number>(30)
    const [open, setOpen] = useState(false);
    const [selectUrl, setSelectUrl] = useState<string>()
    const [visible, setVisible] = useState<boolean>(false)
    const [lookUrl, setLookUrl] = useState<string>()
    /************************************/

    const handleOk = () => {
        if (selectUrl) {
            console.log(selectUrl)
            onChange?.(selectUrl)
            setOpen(false);
        }
    };

    const onVisibleChange = async (newOpen: boolean) => {
        if (newOpen && url && url.includes('.mp4')) {
            let data = await videoUrlMessage(url)
            let duration = data.videoLength
            let gap = duration / urlNum
            setUrlList(Array(urlNum).fill('').map((item, index) => url + `?x-oss-process=video/snapshot,t_${(index * gap * 1000).toFixed(0)}`))
        }
        setOpen(newOpen);
    };

    const selectHandle = (url: string) => {
        setSelectUrl(url)
    }

    return <Popover
        content={<div className={style.popover}>
            <div className={style.content}>
                {urlList.map((url, index) => <div className={`${style.imgBox} ${selectUrl === url ? style.select : ''}`} key={index}>
                    <Lazyimg onClick={() => { selectHandle(url) }} className={`lazy`} src={url} />
                    <span className={style.look} onClick={() => { setLookUrl(url); setVisible(true) }}>查看</span>
                </div>)}
            </div>
            <Image width={200} style={{ display: 'none' }} src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
                preview={{
                    visible,
                    src: lookUrl,
                    onVisibleChange: (value) => {
                        setVisible(value);
                    },
                }}
            />
            <Button type="primary" style={{ backgroundColor: '#00b96b', borderColor: '#00b96b' }} onClick={handleOk} disabled={!selectUrl} size="small">确定</Button>
        </div>}
        destroyTooltipOnHide={true}
        trigger="click"
        open={open}
        onOpenChange={onVisibleChange}
    >
        <Button type="link" icon={<ScissorOutlined />}></Button>
    </Popover>
}

export default React.memo(VideoFrame)