import { FC, useRef } from "react";
import { Modal, ModalProps, Table } from "antd";
import style from "../AddIndexModal/index.module.scss";

export interface AddIndexTemplateModalProps extends Omit<ModalProps, "onOk"> {
  onCancel?: () => void;
  onOk?: (rows: any) => void;
}

const data = [
  {
    id: 1,
    name: "name",
    description: "description",
  },
];

export const AddIndexTemplateModal: FC<AddIndexTemplateModalProps> = ({
  open,
  onOk,
  onCancel,
  ...rest
}) => {
  const selectedRows = useRef<null | typeof data>(null);

  const handleCancel = () => {
    onCancel?.();
  };

  const handleConfirm = () => {
    onOk?.(selectedRows);
    onCancel?.();
  };

  return (
    <Modal
      className={style.modal}
      title="从模板中添加"
      okText="提交"
      cancelText="取消"
      open={open}
      width={640}
      okButtonProps={{
        disabled: false,
      }}
      onOk={handleConfirm}
      onCancel={handleCancel}
      {...rest}
    >
      <Table
        className="cus-table"
        rowSelection={{
          type: "radio",
          onChange: (selectedRowKeys, _selectedRows) => {
            selectedRows.current = _selectedRows;
          },
        }}
        dataSource={data}
        rowKey="id"
        columns={[
          {
            title: "模板名称",
            dataIndex: "name",
          },
          {
            title: "说明",
            dataIndex: "description",
          },
        ]}
      />
    </Modal>
  );
};
