import { Modal } from "antd";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
import Config from "@/util/config";
import EasyPlayer from "../videoTow";
const WhichVideo = (props) => {
  const { homeStore } = props;
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [deviceList, setDeviceList] = useState<Array<any>>([]);
  const [channelList, setChannelList] = useState<Array<any>>([]);
  const [deviceId, setDeviceId] = useState<number>(0);
  const [channelId, setChannelId] = useState<number>(0);
  const [videoUrl, setVideoUrl] = useState<string | null>("");
  let timer: any = null;

  const openDispatch = async () => {
    setIsModalOpen(true);
    let req = await homeStore.getVideoUrlList();
    setDeviceList(req.EasyDarwin.Body.Devices);
  };
  const getChannerList = async (id) => {
    let reqs = await homeStore.getChannerUrlList(id);
    setChannelList(reqs.EasyDarwin.Body.Channels);
  };

  const getUrl = async (id) => {
    if (timer) {
      clearInterval(timer);
    }
    const fetchUrl = async () => {
      try {
        const reqs = await homeStore.getChannerStrem(deviceId, id);
        if (!reqs.EasyDarwin) return;
        const url = Config.videoApis + reqs.EasyDarwin.Body.URL;
        setVideoUrl(url);
      } catch (error) {
        console.error("Error fetching video URL:", error);
      }
    };
    fetchUrl();
    timer = setInterval(() => {
      fetchUrl();
    }, 35000);
  };
  useEffect(() => {
    return () => {
      clearInterval(timer);
    };
  }, []);
  return (
    <>
      <span onClick={openDispatch}> 视频查看</span>
      <Modal
        title={"视频查看"}
        className="owner_model"
        width={"80%"}
        height={"650px"}
        centered
        open={isModalOpen}
        afterClose={() => {
          setDeviceList([]);
          setChannelList([]);
          setVideoUrl(null);
          setChannelId(0);
        }}
        onOk={() => {}}
        footer={null}
        onCancel={() => {
          setIsModalOpen(false);
        }}
      >
        <div>
          <div style={{ display: "flex" }}>
            <div style={{ overflowY: "scroll", height: "550px" }}>
              {deviceList.map((item, index) => {
                return (
                  <div
                    key={index}
                    style={{ cursor: "pointer" }}
                    onClick={() => {
                      setDeviceId(item.DeviceID);
                      getChannerList(item.DeviceID);
                    }}
                  >
                    <p
                      style={{
                        color: deviceId === item.DeviceID ? "yellow" : "#fff",
                      }}
                    >
                      {item.DeviceName}
                    </p>
                  </div>
                );
              })}
            </div>
            <div style={{ width: "20px" }}></div>
            <div style={{ height: "550px", overflow: "scroll" }}>
              {channelList.map((item, index) => {
                return (
                  <div
                    key={index}
                    style={{ cursor: "pointer" }}
                    onClick={() => {
                      setChannelId(item.ChannelID);
                      getUrl(item.ChannelID);
                    }}
                  >
                    <p
                      style={{
                        color: channelId === item.ChannelID ? "yellow" : "#fff",
                      }}
                    >
                      {item.Name}
                    </p>
                  </div>
                );
              })}
            </div>
            <div style={{ width: "20px" }}></div>
            <div className="video" style={{ width: "100%", height: "550px" }}>
              {<EasyPlayer url={videoUrl} />}
            </div>
          </div>
        </div>
      </Modal>
    </>
  );
};

// export default WhichVideo;
export default inject("homeStore")(observer(WhichVideo));