import {useIntl} from '@umijs/max';
// import {putActionDetectionUpdateActionDetection} from "@/services/analysis/ActionDetection";
import React, {useState, useRef, useCallback, useEffect} from 'react';
import videojs from 'video.js';
import {Form, Modal} from 'antd';
import VideoJS from "@/components/VideoPlayer";
import axios from "axios";
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.ActionDetection>;

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

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

  const intl = useIntl();
  const [form] = Form.useForm<API.ActionDetection>();
  const [fps, setFps] = useState(0);
  const flatRef = useRef(null);
  const [videoInit, setVideoInit] = useState(false);
  const [videoOptions, setVideoOptions] = useState<any>({
    autoplay: true,
    controls: true,
    responsive: true,
    fluid: true,
    plugins: {
      advanced: {
        // video_config_options : {
        //   "info": {
        //     "video_path": "/video_save_path/hands/20231012/171336964649.mp4",
        //     "fps": 20
        //   },
        //   "result": {
        //     "id_0": {
        //       "time": 3148,
        //       "duration": 400
        //     },
        //     "id_1": {
        //       "time": 3677,
        //       "duration": 400
        //     },
        //     "id_2": {
        //       "time": 4077,
        //       "duration": 400
        //     },
        //     "id_3": {
        //       "time": 5379,
        //       "duration": 400
        //     },
        //     "id_4": {
        //       "time": 5779,
        //       "duration": 222
        //     }
        //   }
        // }
      }
    },
    sources: [
      // {
      //   src: "http://192.168.10.96/video_save_path/hands/20231012/171336964649.mp4",
      // }
    ],

  });
  const onResize = useCallback((entries: any) => {
    requestAnimationFrame(async () => {
      flatRef.current &&
      ((flatRef.current as any).style.height = entries[0].contentRect.height - 54 + "px");
    });
  }, []);
  const playerRef = React.useRef(null);
  useEffect(()=>{
    setVideoInit(false)
    if (props.modalOpen) {
      // let a = request(FILE_SERVER_HOST+props.values.configFile, {
      //   // skipErrorHandler: true,
      // });
      if (props.values.configFile) {
        axios.get(FILE_SERVER_HOST+props.values.configFile.replace(/^\.\//, "/")).then((res)=>{
          setVideoInit(true)
          let video_url = res?.data?.info?.video_path || ''
          video_url = video_url.replace(/^\.\//, "/");
          setFps(res?.data?.info?.fps || 0)
          setVideoOptions({
            ...videoOptions,
            plugins: {
              advanced: {
                video_config_options: res?.data || {},
                error_type: intl.formatMessage({id: `error_type.${props.values.type}`, defaultMessage: '错误'}),
              }
            },
            sources: [
              {
                src: `${FILE_SERVER_HOST}` + video_url,
              }
            ],
          })
        })
      }

    } else {
      if (playerRef?.current) {
        playerRef.current.pause();
        playerRef.current.dispose();
      }
    }

  }, [props.modalOpen])

  const handlePlayerReady = (player) => {

    playerRef.current = player;
    player.advanced();
    if (fps !== 0 && props.values.time && props.values.time > 0) {
      let start_time = Math.floor(props.values.time/fps)
      playerRef.current.currentTime(start_time);
    }
    // You can handle player events here, for example:
    player.on('waiting', () => {
      videojs.log('player is waiting');
    });

    player.on('dispose', () => {
      videojs.log('player will dispose');
    });
  };

  return (
    <Modal title="播放视频" open={props.modalOpen}
           width={1280}
           onOk={props.handleModal} onCancel={props.handleModal}
           footer={null}>
      {videoInit && (<VideoJS options={videoOptions} onReady={handlePlayerReady} />)}

    </Modal>
  )
}
export default VideoModal;
