import { UploadOutlined } from '@ant-design/icons';
import { ActionType, ProTableProps } from '@ant-design/pro-components';
import { SelectModal } from '@chageable/components';
import { Upload } from 'antd';
import React, { MutableRefObject, useEffect, useState } from 'react';
import useStyle from './style.style';

export interface UploadMaterialProps {
  maxCount: number;
  onChange: (fileList: any[]) => void;
  fileList?: any[];
  request: ProTableProps<any, any>['request'];
  toolBarRender?: ProTableProps<any, any>['toolBarRender'];
  actionRef?: MutableRefObject<ActionType | undefined>;
}

const UploadMaterial: React.FC<UploadMaterialProps> = (props) => {
  const {
    maxCount,
    fileList: initialFileList,
    onChange,
    request,
    toolBarRender,
    actionRef,
  } = props;
  const [fileList, setFileList] = useState<any[]>([]);
  const { styles } = useStyle();
  const [open, setOpen] = useState(false);

  useEffect(() => {
    setFileList(initialFileList || []);
  }, [initialFileList]);

  return (
    <>
      <Upload
        listType={'picture-card'}
        fileList={fileList}
        onRemove={(file) => {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          setFileList(newFileList);
          onChange(newFileList);
        }}
        showUploadList={true}
        multiple={false}
        accept={'image/*'}
        maxCount={maxCount || 1}
        openFileDialogOnClick={false}
      >
        {fileList.length >= (maxCount || 1) ? null : (
          <div className={styles.uploadImage} onClick={() => setOpen(true)}>
            <div className={styles.uploadImageIcon}>
              <UploadOutlined /> 单击上传
            </div>
          </div>
        )}
      </Upload>

      {/* 选择图片 */}
      <SelectModal
        rowKey={'materialId'}
        modalProps={{
          title: '选择图片',
          open: open,
          onOk: () => setOpen(false),
          onCancel: () => setOpen(false),
        }}
        tableProps={{
          actionRef: actionRef,
          toolBarRender: toolBarRender,
          rowKey: 'materialId',
          columns: [
            {
              title: '素材内容',
              dataIndex: 'url',
              valueType: 'image',
            },
            {
              title: '素材名称',
              dataIndex: 'name',
            },
            {
              title: '素材分类',
              dataIndex: ['categoryVO', 'name'],
            },
          ],
          params: {
            materialPageQry: {
              type: 'FILE_IMAGE',
            },
          },
          request: request,
          pagination: {
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total: number) => `共 ${total} 条`,
            pageSizeOptions: ['10', '20', '50', '100'],
            defaultPageSize: 10,
            hideOnSinglePage: true,
            position: ['bottomRight'],
          },
        }}
        onFinish={(materialList) => {
          const imageList = materialList.map((materialVO) => {
            return {
              uid: materialVO?.materialId,
              name: materialVO?.name,
              // @ts-ignore
              status: 'success',
              thumbUrl: materialVO?.url,
              url: materialVO?.url,
            };
          });

          const newFileList = [...fileList, ...imageList];
          setFileList(newFileList);

          onChange(newFileList);
        }}
        num={(maxCount || 1) - fileList.length}
        type={'checkbox'}
      />
    </>
  );
};
export default UploadMaterial;
