import { FC, ReactNode } from 'react';
import { UploadFile } from 'antd/es/upload/interface';
import { DeleteOutlined, DownloadOutlined, EyeOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import {
  UploadFileItem,
  UploadFileItemActions,
  UploadPictureItem,
  UploadPictureItemActions,
} from './style';

export interface DageUploadItemActionsProps {
  file: UploadFile;
  actions: {
    download: () => void;
    preview: () => void;
    remove: () => void;
  };
  isPictureCard?: boolean;
  disabled?: boolean;
  children: ReactNode;
}

export const DageUploadItemActions: FC<DageUploadItemActionsProps> = ({
  children,
  disabled,
  file,
  isPictureCard,
  actions,
}) => {
  const showDownload = (file.url || '').indexOf('http') > -1;
  const UploadItem = isPictureCard ? UploadPictureItem : UploadFileItem;
  const UploadItemActions = isPictureCard ? UploadPictureItemActions : UploadFileItemActions;

  return (
    <UploadItem className="dage-upload__item">
      {children}

      <UploadItemActions className="dage-upload__item__actions">
        {isPictureCard && (
          <Button type="text" size="small" icon={<EyeOutlined />} onClick={actions.preview} />
        )}
        {showDownload && (
          <Button type="text" size="small" icon={<DownloadOutlined />} onClick={actions.download} />
        )}
        {!disabled && (
          <Button type="text" size="small" icon={<DeleteOutlined />} onClick={actions.remove} />
        )}
      </UploadItemActions>
    </UploadItem>
  );
};
