import React, { useState } from "react";
import ReactDOM from "react-dom";
import { hot } from "react-hot-loader/root";
import EasyGUI, { ChildrenManage, ConfigProvider, message, Modal, Tabs, Utils } from "../src";
import { deepFindOne } from "../src/components/_util/utils";
import ColorPicker from "../src/components/color-picker";
import styles from "./index.less";
import mock from "./mock copy 3.json";
import { chartOnlyDimensionConfig, ScreenConfig, tabRuleVisibleConfig } from "./mock.js";

const { useModal } = Modal;

function App() {
  const [config, setConfig] = useState(chartOnlyDimensionConfig);
  const [visible, setVisible] = useState(false);
  const [modal, contextHolder] = useModal();
  const [childrenList, setChildrenList] = useState([{ id: 1, name: "子组件", show: false }]);
  const [customInfo, setCustomInfo] = useState([]);

  const handleChange = (updates) => {
    setConfig(Utils.updateArrayConfig(config, updates));
  };

  console.log("mock config: ====", config);
  const styleConfig = config.filter((d) => d._name !== "interaction");
  const interactionConfig = config.filter((d) => d._name === "interaction");
  const marks = [];
  const sortChildren = (componentChildren, customInfoList = [], level = 1) => {
    if (Array.isArray(customInfoList) && customInfoList.length) {
      const reduceCustomInfo = customInfoList.reduce((all, item) => {
        if (Array.isArray(item.children)) {
          const show = item.children.every(
            (d) => componentChildren.find((c) => c.id === d.id)?.show,
          ); // 查看子组件是否都是隐藏状态
          return all.concat({
            ...item,
            show,
            children: sortChildren(componentChildren, item.children, level + 1),
          });
        }
        const current = componentChildren.find((d) => d.id === item.id);
        if (current) {
          // 如果存在
          marks.push(current.id);
          return all.concat(current);
        }
        return all;
      }, []);
      if (componentChildren.length !== marks.length && level === 1) {
        const filterComponentChildren = componentChildren.filter((d) => !marks.includes(d.id));
        return reduceCustomInfo.concat(filterComponentChildren);
      }
      return reduceCustomInfo;
    }
    return level === 1 ? componentChildren : [];
  };
  const sortChildrenList = sortChildren(childrenList, customInfo);

  return (
    <>
      <ConfigProvider
        assetsUrl="https://easyv-test.oss-cn-hangzhou.aliyuncs.com"
        onUpload={() => {}}
      >
        <div style={{ width: 800 }}></div>

        {/* <ColorPicker /> */}

        <div className={styles.container}>
          <Tabs type="card">
            <Tabs.TabPane tab="样式" key="1">
              <div>
                <ChildrenManage
                  onUpdate={() => {}}
                  onAdd={async (componentId, childModuleName) => {
                    const newId = childrenList[childrenList.length - 1]
                      ? childrenList[childrenList.length - 1].id + 1
                      : parseInt(Math.random() * 1000);
                    setChildrenList(
                      childrenList.concat({
                        name: "test",
                        moduleName: "test",
                        id: newId,
                      }),
                    );
                  }}
                  onDelete={async (id) => {
                    setChildrenList(childrenList.filter((v) => v.id !== id));
                  }}
                  onCopy={async (id) => {
                    const item = childrenList.find((d) => d.id === id);
                    const newId = childrenList[childrenList.length - 1]
                      ? childrenList[childrenList.length - 1].id + 1
                      : parseInt(Math.random() * 1000);
                    const result = {
                      ...item,
                      id: newId,
                    };
                    setChildrenList(childrenList.concat(result));
                    return result;
                  }}
                  onCustomInfo={setCustomInfo}
                  childrenList={sortChildrenList}
                  childrenAll={[{ name: "test", moduleName: "test" }]}
                />
                <EasyGUI config={styleConfig} onFieldsChange={handleChange} />
              </div>
            </Tabs.TabPane>
            <Tabs.TabPane tab="数据" key="2">
              tab2
            </Tabs.TabPane>
            <Tabs.TabPane tab="交互" key="3">
              <EasyGUI config={interactionConfig} onFieldsChange={handleChange} />
            </Tabs.TabPane>
          </Tabs>
        </div>
        {contextHolder}
        <div>
          <h1>测试其它组件</h1>
        </div>
      </ConfigProvider>
      <Modal title={"test"} visible={visible} onCancel={() => {}}>
        <span>奥利给</span>
      </Modal>
    </>
  );
}

const Demo = hot(App);

ReactDOM.render(<Demo />, document.getElementById("root"));