// src/pages/gallery/components/GalleryTable.tsx
import { ImageItem } from '@/pages/gallery/typings';
import { formatBytes } from '@/utils/timelineUtils';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { FC } from 'react';
import '../index.css';
import { getAuthization } from '@/utils/userUtils';

interface GalleryTableProps {
  imageList: ImageItem[];
  loading: boolean;
  pagination: {
    current: number;
    pageSize: number;
    total?: number;
  };
  selectedRowKeys: string[];
  onChange: (pagination: any) => void;
  onSelectedRowsChange: (keys: string[]) => void;
  onPreview: (index: number) => void;
  onDownload: (instanceId: string, imageName: string) => void;
  onDelete: (instanceId: string, imageName: string) => void;
}

const GalleryTable: FC<GalleryTableProps> = ({
  imageList,
  loading,
  pagination,
  selectedRowKeys,
  onChange,
  onSelectedRowsChange,
  onPreview,
  onDownload,
  onDelete,
}) => {
  const columns: ProColumns<ImageItem>[] = [
    {
      title: '图片',
      dataIndex: 'instanceId',
      width: 120,
      render: (_, record) => (
        <div
          style={{
            width: 100,
            height: 100,
            backgroundImage: `url(/file/image-low-res/${record.instanceId}?Authorization=${getAuthization()})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
            borderRadius: 4,
          }}
        />
      ),
    },
    {
      title: '名称',
      dataIndex: 'imageName',
      ellipsis: true,
    },
    {
      title: '大小',
      dataIndex: 'size',
      renderText: (text) => (text ? formatBytes(text) : '-'),
    },
    {
      title: '上传时间',
      dataIndex: 'uploadTime',
      valueType: 'dateTime',
    },
    {
      title: '操作',
      valueType: 'option',
      render: (_, record) => [
        <a
          key="preview"
          onClick={() => {
            const index = imageList.findIndex((img) => img.instanceId === record.instanceId);
            onPreview(index);
          }}
        >
          预览
        </a>,
        <a key="download" onClick={() => onDownload(record.instanceId, record.imageName)}>
          下载
        </a>,
        <a
          key="delete"
          onClick={() => onDelete(record.instanceId, record.imageName)}
          style={{ color: 'red' }}
        >
          删除
        </a>,
      ],
    },
  ];

  return (
    <ProTable<ImageItem>
      columns={columns}
      dataSource={imageList}
      rowKey="instanceId"
      pagination={{
        current: pagination.current,
        pageSize: pagination.pageSize,
        total: pagination.total,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
      }}
      loading={loading}
      search={false}
      options={false}
      onChange={onChange}
      rowSelection={{
        selectedRowKeys,
        onChange: (keys) => onSelectedRowsChange(keys as string[]),
      }}
    />
  );
};

export default GalleryTable;
