import { FC, Key, useState } from "react";
import { Modal, ModalProps, Table } from "antd";
import style from "../AddIndexModal/index.module.scss";
import { ASS_INDEX_TYPE, IAssTemplateDetail } from "@/types";
import { getAssTemplateListApi } from "@/api";
import { useParams } from "react-router-dom";
// import { getSelectedNodes } from "@/utils";

export interface AddIndexTemplateModalProps extends Omit<ModalProps, "onOk"> {
  onCancel?: () => void;
  onOk?: (keys: string[]) => void;
  // onOk?: (keys: Key[], rows: AssIndexTreeItemType[]) => void;
}

export const AddIndexTemplateModal: FC<AddIndexTemplateModalProps> = ({
  open,
  onOk,
  onCancel,
  ...rest
}) => {
  const params = useParams();
  const [loading, setLoading] = useState(false);
  const [submitLoading, setSubmitLoading] = useState(false);
  const [selectedRows, setSelectedRows] = useState<IAssTemplateDetail[]>([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([]);
  const [list, setList] = useState<IAssTemplateDetail[]>([]);

  const getList = async () => {
    try {
      setLoading(true);
      const data = await getAssTemplateListApi(params.type as ASS_INDEX_TYPE);
      setList(data);
    } finally {
      setLoading(false);
    }
  };

  // 获取已选中的指标
  // const getCheckedAssIndexs = async (checkedKeys: number[]) => {
  //   const data = await getAssIndexTreeApi(params.type as ASS_INDEX_TYPE);
  //   return getSelectedNodes(checkedKeys, data);
  // };

  const handleCancel = () => {
    onCancel?.();
    setSelectedRows([]);
    setSelectedRowKeys([]);
  };

  const handleConfirm = async () => {
    try {
      setSubmitLoading(true);
      // const keys = selectedRows[0].normIds.split(",").map((i) => Number(i));
      // const rows = await getCheckedAssIndexs(keys);
      onOk?.(selectedRows[0].normIds.split(","));
      handleCancel();
    } finally {
      setSubmitLoading(false);
    }
  };

  const handleAfterOpenChange = (open: boolean) => {
    if (open && !list.length) getList();
  };

  return (
    <Modal
      className={style.modal}
      title="从模板中添加"
      okText="提交"
      cancelText="取消"
      open={open}
      width={640}
      okButtonProps={{
        disabled: !selectedRows.length,
        loading: submitLoading,
      }}
      onOk={handleConfirm}
      onCancel={handleCancel}
      {...rest}
      afterOpenChange={handleAfterOpenChange}
    >
      <Table
        loading={loading}
        className="cus-table"
        rowSelection={{
          type: "radio",
          selectedRowKeys: selectedRowKeys,
          onChange: (_selectedRowKeys, _selectedRows) => {
            setSelectedRows(_selectedRows);
            setSelectedRowKeys(_selectedRowKeys);
          },
        }}
        dataSource={list}
        rowKey="id"
        columns={[
          {
            title: "模板名称",
            dataIndex: "name",
          },
          {
            title: "说明",
            dataIndex: "remark",
            ellipsis: true,
          },
        ]}
      />
    </Modal>
  );
};
