import React, { useState } from "react";
import { Flex, Switch, Table, Tag, Transfer } from "antd";
import type {
  GetProp,
  TableColumnsType,
  TableProps,
  TransferProps,
} from "antd";
import { DATA_TYPE_OPTIONS } from "@/constants";
import type { ViewTable, ColumnItem } from "@/type";
import { DataType } from "@/enum";

type TransferItem = GetProp<TransferProps, "dataSource">[number];
type TableRowSelection<T extends object> = TableProps<T>["rowSelection"];

interface TableTransferProps extends TransferProps<TransferItem> {
  dataSource: ColumnItem[];
  leftColumns: TableColumnsType<ColumnItem>;
  rightColumns: TableColumnsType<ColumnItem>;
}

const TableTransfer: React.FC<TableTransferProps> = (props) => {
  const { leftColumns, rightColumns, ...restProps } = props;
  return (
    <Transfer style={{ width: "100%" }} {...restProps}>
      {({
        direction,
        filteredItems,
        onItemSelect,
        onItemSelectAll,
        selectedKeys: listSelectedKeys,
        disabled: listDisabled,
      }) => {
        const columns = direction === "left" ? leftColumns : rightColumns;
        const rowSelection: TableRowSelection<TransferItem> = {
          getCheckboxProps: () => ({ disabled: listDisabled }),
          onChange(selectedRowKeys) {
            onItemSelectAll(selectedRowKeys, "replace");
          },
          selectedRowKeys: listSelectedKeys,
          selections: [
            Table.SELECTION_ALL,
            Table.SELECTION_INVERT,
            Table.SELECTION_NONE,
          ],
        };

        return (
          <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={filteredItems}
            size="small"
            style={{ pointerEvents: listDisabled ? "none" : undefined }}
            onRow={({ key, disabled: itemDisabled }) => ({
              onClick: () => {
                if (itemDisabled || listDisabled) {
                  return;
                }
                onItemSelect(key, !listSelectedKeys.includes(key));
              },
            })}
          />
        );
      }}
    </Transfer>
  );
};

const columns: TableColumnsType<ColumnItem> = [
  {
    title: "字段代码",
    dataIndex: "schemaName",
    width: 150,
  },
  {
    title: "字段名称",
    dataIndex: "langName",
    width: 100,
    render: (_dom, entity) => {
      return (
        entity.langNameList?.find(
          (item: Record<string, string>) => item.name === "zh-CN"
        )?.value || "-"
      );
    },
  },
  {
    title: "类型",
    dataIndex: "type",
    width: 120,
    render: (val) => {
      return DATA_TYPE_OPTIONS.find((item) => item.value === val)?.label || "-";
    },
  },
  {
    title: "长度",
    dataIndex: "maxLength",
    width: 80,
    render: (text, record) => {
      return record.type === DataType.Decimal
        ? `${record.precision},${record.scale}`
        : text;
    },
  },
  {
    title: "必填",
    dataIndex: "isRequired",
    render: (val) => {
      return <Switch disabled checked={val} />;
    },
    width: 80,
  },
  {
    title: "唯一",
    dataIndex: "isUnique",
    render: (val) => {
      return <Switch disabled checked={val} />;
    },
    width: 80,
  },
  {
    title: "默认值",
    dataIndex: "defaultValue",
    width: 150,
  },
  {
    title: "字符集",
    dataIndex: "chartset",
    width: 120,
  },
  {
    title: "内容",
    dataIndex: "whereInputContent",
    width: 120,
  },
  {
    title: "描述",
    dataIndex: "memo",
    width: 120,
  },
];

const filterOption = (input: string, item: ColumnItem) =>
  !!(
    item?.schemaName?.includes(input) ||
    item.langNameList
      ?.find((item) => item.name === "zh-CN")
      ?.value?.includes(input)
  );

const TransferTable: React.FC<{ dataSource: ColumnItem[], useModelData: boolean }> = (props) => {
  const [targetKeys, setTargetKeys] = useState<TransferProps["targetKeys"]>([]);

  const onChange: TableTransferProps["onChange"] = (nextTargetKeys) => {
    setTargetKeys(nextTargetKeys);
  };

  return (
    <Flex align="start" gap="middle" vertical>
      <TableTransfer
        dataSource={props.dataSource}
        rowKey={(item) => item.id}
        titles={["当前字段", "数据表字段"]}
        targetKeys={targetKeys}
        showSearch
        showSelectAll={false}
        onChange={onChange}
        filterOption={filterOption}
        leftColumns={columns}
        rightColumns={columns}
      />
    </Flex>
  );
};

export default TransferTable;
