import { invoke } from "@tauri-apps/api/core";
import { useCallback, useEffect, useMemo, useState } from "react";
import styles from "./ImportDirectory.module.scss";
import moment from "moment";
import { Flex, Table } from "antd";
import Title from "antd/es/typography/Title";

interface ModuleProps {
  module_name: String;
  timestamp: number;
  forwarder_chain: number;
  module_name_rva: number;
  functions: FunctionProps[];
}
interface FunctionProps {
  function_name: string;
  function_address: number;
  function_hint: number;
  function_type: "Named" | "Ordinal";
}

interface ImportModuleComponentProps {
  moduleList: ModuleProps[];
}

interface ModuleFuntionsComponentProps {
  functionList: FunctionProps[];
}

const ImportModuleComponent: React.FC<ImportModuleComponentProps> = (props) => {
  const { moduleList } = props;
  const [selectedRowKey, setSelectedRowKey] = useState([]);
  const handleRowSelection = (selectedRowKeys: any) => {
    setSelectedRowKey(selectedRowKeys);
  };

  const columns = [
    {
      title: "模块名称",
      dataIndex: "module_name",
      key: "module_name",
    },
    {
      title: "导入函数数量",
      render: (_text: any, record: any) => {
        console.log("record", record);
        return record.functions.length;
      },
    },
    {
      title: "时间戳",
      dataIndex: "timestamp",
      key: "timestamp",
      render: (text: number) => {
        return moment(text).format("YYYY-MM-DD HH:mm:ss");
      },
    },
    {
      title: "转发链",
      dataIndex: "forwarder_chain",
      key: "forwarder_chain",
    },
    {
      title: "模块名称的RVA",
      dataIndex: "module_name_rva",
      key: "module_name_rva",
      render: (text: number) => {
        return "0x" + text.toString(16).toUpperCase();
      },
    },
  ];

  const select_functions = useMemo(() => {
    return moduleList.find((module) => module.module_name === selectedRowKey[0])
      ?.functions;
  }, [selectedRowKey]);

  return (
    <Flex className={styles.moduleContainer}>
      <div>
        <Title level={3}>导入模块</Title>
        <Table
          columns={columns}
          rowSelection={{
            type: "radio",
            selectedRowKeys: selectedRowKey,
            selections: [
              {
                key: "module_name",
                text: "模块名称",
              },
            ],
          }}
          onRow={(record, rowIndex) => {
            return {
              onClick: (event) => {
                handleRowSelection([record.module_name]);
              },
            };
          }}
          bordered
          dataSource={moduleList}
          rowKey="module_name"
          pagination={false}
        />
      </div>
      <div>
        <Title level={3}>导入模块</Title>
        <ModuleFuntionsComponent functionList={select_functions} />
      </div>
    </Flex>
  );
};

const ModuleFuntionsComponent: React.FC<ModuleFuntionsComponentProps> = (
  props
) => {
  const { functionList } = props;
  const columns = [
    {
      title: "序号",
      render:(_text,_record,index)=>`${index+1}`,
      rowScope: 'row',
    },
    {
      title: "函数名称",
      dataIndex: "function_name",
      key: "function_name",
    },
    {
      title: "函数地址",
      dataIndex: "function_address",
      key: "function_address",
      render: (text: number) => {
        return "0x" + text.toString(16).toUpperCase();
      },
    },
    {
      title: "函数提示",
      dataIndex: "function_hint",
      key: "function_hint",
    },
    {
      title: "函数类型",
      dataIndex: "function_type",
      key: "function_type",
      render: (text: string) => {
        console.log("text", text);
        return text == "Named" ? "命名" : "序数";
      },
    },
  ];

  return (
    <Flex className={styles.functionContainer}>
      <Table
        columns={columns as any}
        dataSource={functionList}
        rowKey="function_name"
        pagination={false}
        bordered
      />
    </Flex>
  );
};

export default function ImportDirectory() {
  const [data, setData] = useState([]);

  const getData = () => {
    invoke("command_get_pe_data_import_directory")
      .then((res) => {
        const { fields } = res as any;
        setData(fields);
      })
      .catch((err) => {
        console.log("err", err);
      });
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <div>
      <ImportModuleComponent moduleList={data} />
    </div>
  );
}
