import { CloseOutlined } from '@ant-design/icons';
import { Button, Card, Descriptions, Space, Tooltip, Typography } from 'antd';
import { cloneDeep, throttle } from 'lodash';
import { useIntl } from 'umi';

const { Paragraph } = Typography;
type FileCardsProps = {
  value?: any[];
  onChange?: (value?: any[]) => void;
};

const FileCards: React.FC<FileCardsProps> = ({ value, onChange }) => {
  const { formatMessage } = useIntl();
  const handleDownload = throttle((ossUrl) => {
    window.location.href = ossUrl;
  }, 2000);

  const remove = (index: number) => {
    const cardList = cloneDeep(value);
    cardList?.splice(index, 1);
    onChange?.(cardList);
  };

  return (
    <>
      {value?.map((item, index) => {
        return (
          <div
            style={{
              width: '280px',
              borderRadius: '6px',
              position: 'relative',
              padding: '16px',
              border: '1px solid #eee',
              background: '#fafafa',
            }}
            key={item?.apkId}
          >
            <CloseOutlined
              style={{ position: 'absolute', top: '12px', right: '12px', cursor: 'pointer' }}
              onClick={() => remove(index)}
            />
            <Descriptions column={1}>
              <Descriptions.Item label={formatMessage({ id: 'component.uploadFile.system' })}>
                {item?.type}
              </Descriptions.Item>
              <Descriptions.Item label={formatMessage({ id: 'component.uploadFile.fileMd5' })}>
                {item?.md5}
              </Descriptions.Item>
            </Descriptions>
            <Tooltip
              title={
                <Paragraph style={{ color: '#ffffff' }} copyable>
                  {item?.ossUrl}
                </Paragraph>
              }
            >
              <Button type="link" onClick={() => handleDownload(item?.ossUrl)}>
                {formatMessage({ id: 'component.uploadFile.download' })}
              </Button>
            </Tooltip>
          </div>
        );
      })}
    </>
  );
};

export default FileCards;