import homeStore from "@/store/home";
import { TreeSelect, TreeSelectProps } from "antd";
import { useEffect, useState } from "react";

const VideoSelect = (props) => {
  const { changes } = props;
  const [value, setValue] = useState<string>();
  const [treeData, setTreeData] = useState<Array<any>>([]);
  useEffect(() => {
    homeStore.getVideoUrlList().then((res) => {
      let valuList: any = [];
      res.EasyDarwin.Body.Devices.forEach((element) => {
        valuList.push({
          id: element.DeviceID,
          pId: 0,
          value: element.DeviceID,
          title: element.DeviceName,
          disableCheckbox: true,
        });
      });
      setTreeData(valuList);
    });
  }, []);

  const onLoadData: TreeSelectProps["loadData"] = async ({ id }) => {
    let reqs = await homeStore.getChannerUrlList(id);
    let valuList: any = [];
    reqs.EasyDarwin.Body.Channels.forEach((item) => {
      valuList.push({
        key: id + "-" + item.ChannelID,
        id: id + "-" + item.ChannelID,
        pId: id,
        value: id + "-" + item.ChannelID,
        title: item.Name,
        treeExpandAction: true,
      });
    });
    
    setTreeData((prev)=>{
      return [...prev,...valuList]
    });
  };

  const onChange = (newValue: string) => {
    if (newValue.length > 4) return;
    setValue(newValue);
    changes(newValue);
  };
  return (
    <div>
      <TreeSelect
        treeDataSimpleMode
        multiple
        treeCheckable
        style={{ width: "100%" }}
        value={value}
        dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
        placeholder="Please select"
        onChange={onChange}
        loadData={onLoadData}
        treeData={treeData}
      />
    </div>
  );
};

export default VideoSelect;
