import {useIntl} from '@umijs/max';
import React, {useState, useRef, useCallback, useEffect} from 'react';
import {Form, Modal} from 'antd';

import WebRTCStreamer from "@/components/WebRtcPlayer";
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.Device>;

export type VideoModalProps = {
  modalOpen: boolean;
  handleModal: () => void;
  values: Partial<API.Device>;
  reload: any;
  videoServerParam: API.RtspRes;
};

const VideoModal: React.FC<VideoModalProps> = (props) => {

  const intl = useIntl();
  const [form] = Form.useForm<API.ActionDetection>();

  const [videoInit, setVideoInit] = useState(false);


  useEffect(()=>{
    setVideoInit(false)
    if (props.modalOpen) {
      setVideoInit(true)

    } else {
      console.log('***********')
      setVideoInit(false)
    }

  }, [props.modalOpen])


  return (
    <Modal title="播放视频" open={props.modalOpen}
           width={1280}
           onOk={props.handleModal} onCancel={props.handleModal}
           footer={null}>
      {videoInit && (<WebRTCStreamer is_open={props.modalOpen} stream_url={props.values.param} server_url={props.videoServerParam.host || ''}></WebRTCStreamer>)}

    </Modal>
  )
}
export default VideoModal;
