import React, { useContext, useEffect, useState } from "react";
import { deepFindOne, findExpandedKeys, getComponentOptions, searchExpandedKeys } from "_util";
import { ScreenContext } from "config-provider";
import { EasyRadio, EasyTreeSelect } from "config-types";
import styles from "./index.less";

const DEFAULT_SCOPE_OPTIONS = [
  { name: "当前", value: "current" },
  { name: "全局", value: "global" },
];

export default function EasyComponents(props) {
  const {
    value,
    scope = "current",
    scopeOptions = DEFAULT_SCOPE_OPTIONS,
    multiple = true,
    onChange,
    onScopeChange,
  } = props;
  let {
    componentsById = {},
    panelsById = {},
    screensById = {},
    comContainersById = {},
    screenId,
    stateId,
  } = useContext(ScreenContext);
  const [expandedKeys, setExpandedKeys] = useState([]);

  let componentOptions = getComponentOptions({
    componentsById,
    panelsById,
    screensById,
    comContainersById,
    screenId,
    stateId,
    mode: scope,
  });

  const handleTreeExpand = (keys) => {
    setExpandedKeys(keys);
  };

  const handleSearch = (v) => {
    if (v) {
      // 搜索时展开搜索结果的tree节点
      const keyArr = [...searchExpandedKeys(componentOptions, v).tempExpanedKeys];
      setExpandedKeys(keyArr);
    } else {
      // 搜索框清空后再按选中项展开tree节点
      const keyArr = [...findExpandedKeys(componentOptions, value).tempExpanedKeys];
      setExpandedKeys(keyArr);
    }
  };

  // select下拉时，展开选中的tree节点
  const handleSelectDropdown = (open) => {
    if (open) {
      const keyArr = [...findExpandedKeys(componentOptions, value).tempExpanedKeys];
      setExpandedKeys(keyArr);
    }
  };

  // 修复current模式组件未找到，切换至global模式
  useEffect(() => {
    let res;
    if (Array.isArray(value)) {
      res =
        value.length > 0 &&
        value.some((d) => !deepFindOne(componentOptions, (item) => item.value === d, "children"));
    } else {
      res = value && !deepFindOne(componentOptions, (item) => item.value === value, "children");
    }

    if (res && scope === "current") {
      onScopeChange("global");
    }
  }, []);

  return (
    <div className={scope !== "agentScreen" ? styles.line : ""}>
      <EasyRadio value={scope} options={scopeOptions} onChange={onScopeChange} />
      {scope !== "agentScreen" && (
        <EasyTreeSelect
          value={value}
          multiple={multiple}
          options={componentOptions}
          treeExpandedKeys={expandedKeys}
          onChange={onChange}
          onTreeExpand={handleTreeExpand}
          onDropdownVisibleChange={handleSelectDropdown}
          onSearch={handleSearch}
        />
      )}
    </div>
  );
}
