import type { ActionType } from '@ant-design/pro-components';
import type { RowSelectionType } from 'antd/es/table/interface';
import type { UploadFile } from 'antd/es/upload';
import type { UploadProps } from 'antd/lib/upload';
import React, { useRef, useState } from 'react';
import EnhancedProTable from '@/components/EnhancedProTable';
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
import GroupTagModal from '@/components/GroupTag/GroupTagModal';
import UploadCard from '@/components/Upload/UploadCard';
import {
  type AiSampleRespVO,
  createSampleTag,
  createSampleTagGroup,
  deleteSampleTag,
  deleteSampleTagGroup,
  getSamplePage,
  getSampleTagGroup,
  getSampleTagPage,
  type SampleReqVo,
  updateSampleTag,
  updateSampleTagGroup,
} from '@/services/ai/sample';
import { baseTenantColumns } from './config';
import SampleTagDetail from './detail';
import styles from './index.module.less';

const SampleTag: React.FC = () => {
  const tableRef = useRef<ActionType>(null);

  const [modalVisible, setModalVisible] = useState(false);

  const [selectedRows, setSelectedRows] = useState<AiSampleRespVO[]>([]);

  const [selectTableType, setSelectTableType] =
    useState<RowSelectionType>('radio');

  const handleAll = (selectTableType: RowSelectionType) => {
    setSelectedRows([]);
    setSelectTableType(selectTableType === 'radio' ? 'checkbox' : 'radio');
  };

  const handleTags = () => {
    setModalVisible(true);
  };
  const toolbarActions: ToolbarAction[] = [
    {
      key: 'add',
      label: selectTableType === 'checkbox' ? '取消编辑' : '批量编辑',
      onClick: () => handleAll(selectTableType),
    },
    {
      key: 'tags',
      label: '标签管理',
      type: 'primary',
      onClick: handleTags,
    },
  ];
  const onFetch = async (params: SampleReqVo) => {
    const data = await getSamplePage({
      ...params,
      pageNo: params.current,
    });
    return {
      data: data.list,
      total: data.total,
      success: true,
    };
  };
  const onRefresh = (type?: string) => {
    tableRef.current?.reload();
    tableRef.current?.onValuesChange({}, {});
    type && setSelectedRows([]);
  };

  const onChangeVideo = (file: UploadFile[] | UploadFile | null) => {
    tableRef.current?.reload();
  };
  return (
    <>
      <div className={styles['tag-content']}>
        <div className="left">
          <UploadCard onChange={onChangeVideo} />
          <EnhancedProTable<AiSampleRespVO>
            ref={tableRef}
            columns={baseTenantColumns}
            request={onFetch}
            toolbarActions={toolbarActions}
            headerTitle="样本列表"
            showIndex={false}
            enableRowClick={true}
            scroll={{ x: 400 }}
            rowSelection={{
              type: selectTableType,
              selectedRowKeys: selectedRows.map(
                (item) => item.id,
              ) as React.Key[],
              onChange: (_, selectedRows) => {
                setSelectedRows(selectedRows);
              },
            }}
          />
        </div>

        <div className="detail">
          <SampleTagDetail<AiSampleRespVO>
            type={selectTableType}
            data={selectedRows}
            onRefresh={onRefresh}
          />
        </div>
      </div>
      <GroupTagModal
        visible={modalVisible}
        onCancel={() => setModalVisible(false)}
        editable={true}
        request={{
          groupsApi: {
            get: getSampleTagGroup,
            create: createSampleTagGroup,
            delete: deleteSampleTagGroup,
            update: updateSampleTagGroup,
          },
          tagsApi: {
            get: getSampleTagPage,
            create: createSampleTag,
            delete: deleteSampleTag,
            update: updateSampleTag,
          },
        }}
        title="管理技术标签"
        width={800}
        height={500}
      />
    </>
  );
};

export default SampleTag;
