import useNewToken from "@/Hook/useNewToken"
import React, { useState } from "react"
import style from './index.less'
import { Image, ImageProps, Modal } from 'antd'
import { getVideoImgUrl } from "@/utils/utils"
import play from "@/public/image/play.png"
import { CloseOutlined } from '@ant-design/icons';


const VideoNews: React.FC<ImageProps> = ({ preview = false, src, ...data }) => {

    /*****************************/
    const { token } = useNewToken()
    const [toPlay, setToPlay] = useState<boolean>(false)
    /*****************************/

    return <>
        <div className={style.imgNews} style={{ borderRadius: token.borderRadius }}>
            <Image src={src ? getVideoImgUrl(src) : 'error'} preview={false} {...data} className={style.img}/>
            <div className={style.mask}>
                <img src={play} onClick={() => setToPlay(true)} />
            </div>
        </div>
        {toPlay && <Modal
            open={toPlay}
            styles={{ 
                body: { backgroundColor: 'rgba(0,0,0,0.8)', overflow: 'hidden', borderRadius: token.borderRadius }
            }}
            footer={null}
            closeIcon={<CloseOutlined style={{ color: token.colorBgBase }}/>}
            onCancel={() => setToPlay(false)}
        >
            <video className={style.video} style={{ borderRadius: token.borderRadius }} src={src} autoPlay controls>您的浏览器不支持 video 标签。</video>
        </Modal>}
    </>
}

export default React.memo(VideoNews)