import React, { useEffect, useState } from 'react'
import { Box, NoData } from '$components';
import { Select } from 'antd';
import './style.less';

const { Option } = Select;

function DataTop5(props) {
    const { structures, accessToken, videoList } = props;
    const [showVideoList, setShowVideoList] = useState();

    useEffect(() => {
        if (videoList.length && structures.length && accessToken) {
            if (!showVideoList) {
                setShowVideoList(recUrlToLiveUrl(videoList[0]?.url))
            }
        }
    }, [videoList, accessToken])

    const renderSubtitle = () => (
        videoList?.length > 0 && <Select
            className="gis-search-select"
            popupClassName="super-dropdownClassName"
            style={{ width: 200, height: 24 }}
            showSearch={false}
            optionFilterProp="children"
            // key={Math.random()}
            defaultValue={videoList[0]?.url}
            // value={showVideoList}
            onChange={(value) => { setShowVideoList(recUrlToLiveUrl(value)); }}
        >
            {videoList.map(s => <Option key={s.url} value={s.url}>{s.name}</Option>)}
        </Select>
    );
    return <Box title={"视频监控"} bodyPaddingTop={1} subtitleSelect={renderSubtitle()}>
        {showVideoList ?
            <div className='water_video_container'>
                <div className='_item' key={showVideoList}>
                    <iframe
                        id={`myPlayer-${showVideoList}`}
                        src={`https://open.ys7.com/ezopen/h5/iframe?url=${showVideoList}&autoplay=1&accessToken=${accessToken}`}
                        width='100%' // https://open.ys7.com/doc/zh/book/index/live_proto.html 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;}
                        height='100%'
                        allowFullScreen
                    >
                    </iframe>
                    <div className='video_bottom'>
                        <span className='video_bottom_text'>{videoList?.find(s => s?.url == showVideoList)?.name}</span>
                    </div>
                </div>

            </div>
            : <NoData height={320} />
        }
    </Box>
}

export default DataTop5;

function recUrlToLiveUrl(url) {
    if (!url) return undefined;
    return url.replace('.rec', '.live');
}