import React, { useState, useEffect } from 'react';
import { DownOutlined, RightOutlined } from '@ant-design/icons';
import { Tree, Radio } from 'antd';

import '../g.scss';

function CheckTree(props: ICheckTree) {
  // ……………………………………………………………………………………………………………………………………^_^复制的代码，未开发^_^……………………………………………………………………………………………………………………………………
  const { scenes, sceneSelectId,change,value } = props;
  const [scenesList, setScenesList] = useState<NodeData[]>([]);
  const [expandedKeys, setExpandedKeys] = useState<(string | number)[]>([]);
  const [sceneSelected, setSceneSelected] = useState<string | number>("");
  const [linkTarget, setLinkTarget] = useState<{key:string|number;title:string}>(value?.[1]); // 保存链接的目标

  useEffect(() => {
    const list = scenes?.map((item) => {
      item?.children?.forEach((child) => {
        child.folderId = item?.key;
      });
      return item;
    });
    setScenesList(list);
  }, [scenes]);

  useEffect(() => {
    let hasKey = false;
    scenes?.forEach((item) => {
      item?.children?.forEach((child) => {
        if (child?.key === value?.key) {
          setSceneSelected(item?.key);
          hasKey = true;
        }
      });
    });
    if(!hasKey && value?.key){
      setLinkTarget(null);
      change?.("linkTargetChange",{});
    }else{
      if(value?.key){
        setLinkTarget(value);
      }
      const keys = [];
      scenes?.forEach((item) => {
            keys.push(item.key);
      });
      setExpandedKeys(keys);
    }
  }, [value]);
  
  // 切换选中
  const onChange = (key: string|number,title: string,folderId: string|number) => { 
    // if(!sceneSelectId?.includes(key)){
      if(key === linkTarget?.key){
        setLinkTarget(null);
        change?.("linkTargetChange",{});
        setSceneSelected("");
      }else{
        setLinkTarget({key,title});
        change?.("linkTargetChange",{key,title,folderId});
      }
    // }
  };

  const handleTitleRender = (nodeData: NodeData) => {
    if (nodeData?.children) {
      return (
        <div
          className="zl-lagre-screen-scene-tree-parent"
          onClick={() =>
            expandedKeys.includes(nodeData?.key)
              ? setExpandedKeys(
                  expandedKeys.filter((key) => key !== nodeData?.key)
                )
              : setExpandedKeys([...expandedKeys, nodeData?.key])
          }
        >
          <p className="zl-lagre-screen-scene-tree-parent-name">
            {expandedKeys.includes(nodeData?.key) ? (
              <DownOutlined />
            ) : (
              <RightOutlined />
            )}
            <span
              title={nodeData?.title}
              style={{
                marginLeft: '12px',
                color: sceneSelected === nodeData?.key ? '#526cfd' : '#aab3bc'
              }}
            >
              {nodeData?.title}
            </span>
          </p>
        </div>
      );
    } else {
      return (
        <div
          className="zl-lagre-screen-scene-tree-children"
          title={nodeData?.title}
          onClick={() => onChange(nodeData?.key,nodeData?.title,nodeData?.folderId)}
        >
          <Radio
            value={nodeData?.key}
            checked={nodeData?.key === linkTarget?.key}
          >
            <span className="zl-lagre-screen-scene-tree-children-title">{nodeData?.title}</span>
          </Radio>
        </div>
      );
    }
    return nodeData.title;
  };

  return (
    <div className="zl-lagre-screen-radio-tree">
      <Tree
        defaultExpandAll
        expandedKeys={expandedKeys}
        treeData={scenesList}
        titleRender={handleTitleRender}
        switcherIcon={<DownOutlined />}
        onExpand={(keys) => setExpandedKeys(keys)}
      />
    </div>
  );
}

export default CheckTree;

export interface ICheckTree {
  scenes: NodeData[];
  value: {key:string,title:string};
  sceneSelectId: string[];
  change: Function;
}

export interface NodeData {
  title: string;
  key: string | number;
  folderId?: string | number;
  selectable?: boolean;
  children?: NodeData[];
}