import React, { useState } from 'react';
import './index.less';
import Lazyimg from "react-lazyimg-component"
import { Modal, Popover } from 'antd';
import play from "../../../../../public/image/play.png"
import { CloseOutlined } from '@ant-design/icons';

interface Props {
    imageUrl: string
    videoUrl?: string
    style?: React.CSSProperties
}
const Image1X1: React.FC<Props> = ({ imageUrl, videoUrl, style }) => {

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

    return <>
        <Popover
            placement="right"
            content={<div className='mediaPic mediaPicPopover'>
                <Lazyimg
                    animateType="transition"
                    src={imageUrl}
                    className={`lazy`}
                    animateClassName={['transition-enter', 'transition-enter-active']}
                />
            </div>}
            overlayClassName="mediaPicPopoverContent"
            open={videoUrl ? false : undefined}
        >
            <div style={style} className='mediaPic'>
                <Lazyimg
                    animateType="transition"
                    src={imageUrl}
                    className={`lazy`}
                    animateClassName={['transition-enter', 'transition-enter-active']}
                />
                {videoUrl && <div className='mediaPicVideo'>
                    <img src={play} onClick={(e) => { e.stopPropagation(); e.preventDefault(); setToPlay(true) }} />
                </div>}
            </div>
        </Popover>
        {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={'video'} style={{ borderRadius: 6 }} src={videoUrl} autoPlay controls>您的浏览器不支持 video 标签。</video>
        </Modal>}
    </>;
};

export default React.memo(Image1X1);