import {
  BarsOutlined,
  BorderOutlined,
  DeleteOutlined,
  DownloadOutlined,
  SmallDashOutlined,
  UploadOutlined
} from '@ant-design/icons';
import type { RadioChangeEvent } from 'antd';
import { Button, Radio, Space, Upload } from 'antd';
import { FC } from 'react';
import type { UploadFile } from 'antd/es/upload/interface';

interface GalleryToolbarProps {
  viewMode: 'small' | 'large' | 'list' | 'table';
  batchMode: boolean;
  selectedCount: number;
  onViewModeChange: (e: RadioChangeEvent) => void;
  onBatchModeToggle: () => void;
  onCancelBatch: () => void;
  onBatchDownload: () => void;
  onBatchDelete: () => void;
  onUpload: (file: UploadFile) => void;
  uploading: boolean;
}

const GalleryToolbar: FC<GalleryToolbarProps> = ({
                                                   viewMode,
                                                   batchMode,
                                                   selectedCount,
                                                   onViewModeChange,
                                                   onBatchModeToggle,
                                                   onCancelBatch,
                                                   onBatchDownload,
                                                   onBatchDelete,
                                                   onUpload,
                                                   uploading
                                                 }) => {
  const beforeUpload = (file: UploadFile) => {
    // 只允许上传图片
    const isImage = file.type?.startsWith('image/');
    if (!isImage) {
      console.error(`${file.name} 不是图片文件`);
      return false;
    }
    return true;
  };

  return (
    <Space>
      {batchMode ? (
        <>
          <Button onClick={onCancelBatch}>取消</Button>
          <Button
            type="primary"
            icon={<DownloadOutlined />}
            onClick={onBatchDownload}
            disabled={selectedCount === 0}
          >
            下载({selectedCount})
          </Button>
          <Button
            danger
            icon={<DeleteOutlined />}
            onClick={onBatchDelete}
            disabled={selectedCount === 0}
          >
            删除({selectedCount})
          </Button>
        </>
      ) : (
        <>
          <Upload
            beforeUpload={beforeUpload}
            customRequest={({ file }) => onUpload(file as UploadFile)}
            showUploadList={false}
            multiple
          >
            <Button
              icon={<UploadOutlined />}
              loading={uploading}
            >
              上传图片
            </Button>
          </Upload>
          <Button onClick={onBatchModeToggle}>批量操作</Button>
        </>
      )}
      <Radio.Group
        value={viewMode}
        onChange={onViewModeChange}
        optionType="button"
        buttonStyle="solid"
      >
        <Radio.Button value="small">
          <SmallDashOutlined /> 小图
        </Radio.Button>
        <Radio.Button value="large">
          <BorderOutlined /> 大图
        </Radio.Button>
        <Radio.Button value="list">
          <BarsOutlined /> 列表
        </Radio.Button>
        <Radio.Button value="table">表格</Radio.Button>
      </Radio.Group>
    </Space>
  );
};

export default GalleryToolbar;
