import { useEffect, useState } from "react";
import { useDomain } from "@/hook/useDomain";
import { Button, Modal, Select, Space, Table, Tooltip } from "antd";
import { columns } from "./columns";
import { DesktopOutlined, TagOutlined } from "@ant-design/icons";
import { openOHIFViewer } from "@/modules/Admin/Dicom/Upload/util";

interface ArchiveListProps {
  children?: JSX.Element;
}

type CategoryItemType = {
  labels: { name: string; id: number }[];
};

type ArchiveItemType = {
  id: number;
  username: string;
  PatientID: string;
  StudyInstanceUID: string;
  SeriesInstanceUID: string;
  createTime: string;
  updateTime: string;
};

export const ArchiveList = (props: ArchiveListProps) => {
  const [dataSource, setDataSource] = useState<ArchiveItemType[]>([]);
  const [tableLoading, setTableLoading] = useState(false);
  const { userDomainService, labelDomainService } = useDomain();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectLabels, setSelectLabels] = useState<number[]>();
  const [labelOptions, setLabelOptions] = useState<
    { label: string; value: string }[]
  >([]);

  useEffect(() => {
    userDomainService.findArchiveTask().then((res) => {
      const { code, data } = res;
      if (code === 0) {
        setDataSource(data as ArchiveItemType[]);
      }
      setTableLoading(false);
    });
  }, [userDomainService]);

  useEffect(() => {
    labelDomainService.findLabelCategory().then((res) => {
      const { code, data } = res;
      if (code === 0) {
        const labels = (data as CategoryItemType[])
          .map((i) => i.labels)
          .flat()
          .map((i) => ({ label: i.name, value: String(i.id) }));
        setLabelOptions(labels);
      }
    });
  }, [labelDomainService]);

  const onViewDicom = (record: ArchiveItemType) => {
    const { StudyInstanceUID, SeriesInstanceUID } = record;
    openOHIFViewer(StudyInstanceUID, SeriesInstanceUID);
  };

  const onLabelSelectChange = (labelIds: string[]) =>
    setSelectLabels(labelIds.map((i) => Number(i)));

  const onUpdateLabelForSeries = () => {
    if (selectLabels?.length === 0) return setIsModalOpen(false);
    console.log("onUpdateLabelForSeries", selectLabels);
  };

  return (
    <div>
      <Table
        dataSource={dataSource}
        loading={tableLoading}
        columns={[
          ...columns,
          {
            title: "操作",
            dataIndex: "operation",
            render: (_: any, record: ArchiveItemType) => (
              <Space>
                <Tooltip title="在线阅片">
                  <Button
                    type="text"
                    icon={<DesktopOutlined />}
                    onClick={() => onViewDicom(record)}
                  />
                </Tooltip>
                <Tooltip title="添加标签">
                  <Button
                    type="text"
                    icon={<TagOutlined />}
                    onClick={() => setIsModalOpen(true)}
                  />
                </Tooltip>
              </Space>
            ),
          },
        ]}
        rowKey="id"
      />
      <Modal
        open={isModalOpen}
        title="添加标签"
        cancelText="再想想"
        okText="确认"
        onCancel={() => setIsModalOpen(false)}
        onOk={onUpdateLabelForSeries}
      >
        <Select
          mode="multiple"
          allowClear
          style={{ width: "100%" }}
          placeholder="请选择标签"
          defaultValue={[]}
          onChange={onLabelSelectChange}
          options={labelOptions}
          optionFilterProp="label"
        />
      </Modal>
    </div>
  );
};