import styles from "./MainPage.module.scss";
import { useEffect, useState } from "react";
import { Layout, Flex, Button, Empty } from "antd";
import { listen } from "@tauri-apps/api/event";
import { invoke } from "@tauri-apps/api/core";
const { Content } = Layout;
import { CloseOutlined, FolderOpenFilled } from "@ant-design/icons";
import SiderTree from "../components/side_tree/SideTree";
import DosHeader from "../components/DosHeader/DosHeader";
import NtHeader from "../components/NTHeader/NTHeader";
import FileHeader from "../components/FileHeader/FileHeader";
import SectionHeaders from "../components/SectionHeaders/SectionHeaders";
import OptionalHeader from "../components/OptionalHeader/OptionalHeader";
import { open } from "@tauri-apps/plugin-dialog";
import ImportDirectory from "../components/ImportDirectory/ImportDirectory";

const SelectNodeMap = {
  dos_header: <DosHeader />,
  nt_header: <NtHeader />,
  file_header: <FileHeader />,
  optional_header: <OptionalHeader />,
  section_header: <SectionHeaders />,
  import_directory: <ImportDirectory />,
};

export default function MainPage() {
  const [treeData, setTreeData] = useState([]);
  const [filePath, setFilePath] = useState("");
  const [selectedKey, setSelectedKey] = useState("");

  const openFile = async () => {
    const file = await open({
      multiple: false,
      directory: false,
    });
    if (file) {
      setFilePath(file);
    }
  };

  const closeFile = async () => {
    invoke("command_close_file").then(() => {
      setFilePath("");
      setTreeData([]);
      setSelectedKey("");
    });
  };

  const changeFile = (filePath: string) => {
    invoke("command_open_file", { filePath }).then(() => {
      invoke("command_get_file_pe_node_tree_data").then((res) => {
        setTreeData(res as any);
      });
    });
  };

  const onSelect = (newSelectedKey) => {
    setSelectedKey(newSelectedKey);
  };

  useEffect(() => {
    const unlisten = listen<{ paths: Array<string> }>(
      "tauri://drag-drop",
      (event) => {
        const filePath = event.payload.paths[0];
        setFilePath(filePath);
      }
    );
    return () => {
      unlisten.then((f) => f());
    };
  }, []);

  useEffect(() => {
    if (filePath) {
      changeFile(filePath);
    }
  }, [filePath]);

  return (
    <Layout className={styles.mainLayout}>
      <Flex className={styles.header}>
        <Button
          style={{
            marginRight: "10px",
          }}
          type="primary"
          color="primary"
          onClick={openFile}
          icon={<FolderOpenFilled></FolderOpenFilled>}
        >
          打开新文件
        </Button>
        {/* 关闭文件 */}
        <Button
          danger
          type="dashed"
          color="danger"
          icon={<CloseOutlined></CloseOutlined>}
          onClick={closeFile}
        >
          关闭文件
        </Button>
      </Flex>
      <Flex className={styles.mainContent}>
        <Flex className={styles.sider}>
          <SiderTree
            treeData={treeData}
            defaultSelectedKey={treeData[0]?.key || ""}
            onSelect={onSelect}
          />
        </Flex>
        <Content className={styles.content}>
          {selectedKey && SelectNodeMap[selectedKey] ? (
            SelectNodeMap[selectedKey]
          ) : (
            <Empty
              style={{
                alignSelf: "center",
              }}
              description={"请选择一个节点"}
            />
          )}
        </Content>
      </Flex>
    </Layout>
  );
}
