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';
import './index1.less'

interface Props extends ImageProps {
    maskBodyStyle?: React.CSSProperties
    maskImgStyle?: React.CSSProperties
}

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

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

    return <>
        <div className={`${style.imgNews} imgNews`}>
            <Image src={src ? getVideoImgUrl(src) : 'error'} preview={false} {...data} className={style.img}/>
            <div className={style.mask} style={maskBodyStyle}>
                <img src={play} style={maskImgStyle} onClick={(e) => { e.stopPropagation(); e.preventDefault(); setToPlay(true) }} />
            </div>
        </div>
        {toPlay && <Modal
            open={toPlay}
            bodyStyle={{ backgroundColor: 'rgba(0,0,0,0.8)', overflow: 'hidden', borderRadius: 6 }}
            footer={null}
            closeIcon={<CloseOutlined style={{ color: '#FFF' }}/>}
            onCancel={(e) => {e.stopPropagation(); setToPlay(false)}}
        >
            <video className={style.video} style={{ borderRadius: 6 }} src={src} autoPlay controls>您的浏览器不支持 video 标签。</video>
        </Modal>}
    </>
}

export default React.memo(VideoNews)