import React from 'react';
import './index.scss';

const classPrefix = 'image-uploader';

interface PreviewItemProps {
  src: string;
  deletable?: boolean;
  onView?: () => void;
  onDelete?: () => void;
  box?: number;
  loading?: boolean;
}

const PreviewItem: React.FC<PreviewItemProps> = ({
  src,
  deletable,
  onView,
  onDelete,
  box = 104,
  loading = false,
}) => {
  const handlePreviewClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    onView && onView();
  };

  const handleDeleteClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    onDelete && onDelete();
  };

  return (
    <div
      className={`${classPrefix}-preview-item`}
      style={{ width: box, height: box }}
    >
      <img
        className={`${classPrefix}-preview-item-image`}
        src={src}
        alt='preview'
      />

      {loading && (
        <div className={`${classPrefix}-loading`}>
          <div className={`${classPrefix}-loading-spinner`}></div>
        </div>
      )}

      {deletable && !loading && (
        <div className={`${classPrefix}-preview-item-mask`}>
          <span
            className={`${classPrefix}-preview-item-action`}
            onClick={handlePreviewClick}
            title='预览'
          >
            <svg
              viewBox='64 64 896 896'
              focusable='false'
              data-icon='eye'
              width='1em'
              height='1em'
              fill='currentColor'
              aria-hidden='true'
            >
              <path d='M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 49.5c94.8 199.8 238.1 300.3 430.2 300.3 192.2 0 335.4-100.5 430.2-300.3a60.3 60.3 0 000-49.5zM512 744c-126.9 0-233.7-66.8-292.6-172 58.9-105.2 165.7-172 292.6-172 126.9 0 233.7 66.8 292.6 172-58.9 105.2-165.7 172-292.6 172zm0-288c-64.5 0-116 51.5-116 116s51.5 116 116 116 116-51.5 116-116-51.5-116-116-116zm0 184c-37.6 0-68-30.4-68-68s30.4-68 68-68 68 30.4 68 68-30.4 68-68 68z'></path>
            </svg>
          </span>
          <span
            className={`${classPrefix}-preview-item-action`}
            onClick={handleDeleteClick}
            title='删除'
          >
            <svg
              viewBox='64 64 896 896'
              focusable='false'
              data-icon='delete'
              width='1em'
              height='1em'
              fill='currentColor'
              aria-hidden='true'
            >
              <path d='M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656zM352 480h320c4.4 0 8-3.6 8-8s-3.6-8-8-8H352c-4.4 0-8 3.6-8 8s3.6 8 8 8zm0 160h320c4.4 0 8-3.6 8-8s-3.6-8-8-8H352c-4.4 0-8 3.6-8 8s3.6 8 8 8z'></path>
            </svg>
          </span>
        </div>
      )}
    </div>
  );
};

export default PreviewItem;