import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/* eslint-disable no-console */

import { useContext } from 'react';
import cls from 'clsx';
import { Close, Cross, Description } from '@react-vant/icons'; // Utils

import { isImageFile } from './utils';
import { isDef, getSizeStyle, extend } from '../utils';
import { callInterceptor } from '../utils/interceptor'; // Components

import Image from '../image';
import Loading from '../loading';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';
export const UploaderPreviewItem = props => {
  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace('uploader', prefixCls);

  const renderMask = () => {
    const {
      status,
      message
    } = props.item;

    if (status === 'uploading' || status === 'failed') {
      const MaskIcon = status === 'failed' ? _jsx(Close, {
        className: cls(bem('mask-icon'))
      }) : _jsx(Loading, {
        className: cls(bem('loading'))
      });
      const showMessage = isDef(message) && message !== '';
      return _jsxs("div", Object.assign({
        className: cls(bem('mask'))
      }, {
        children: [MaskIcon, showMessage && _jsx("div", Object.assign({
          className: cls(bem('mask-message'))
        }, {
          children: message
        }))]
      }));
    }

    return null;
  };

  const onDelete = event => {
    const {
      name,
      item,
      index,
      beforeDelete
    } = props;
    event.stopPropagation();
    callInterceptor({
      interceptor: beforeDelete,
      args: [item, {
        name,
        index
      }],
      done: () => {
        var _a;

        return (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props);
      }
    });
  };

  const onPreview = () => {
    if (props.onPreview) props.onPreview();
  };

  const renderDeleteIcon = () => {
    if (props.deletable && props.item.status !== 'uploading') {
      return _jsx("div", Object.assign({
        className: cls(bem('preview-delete')),
        onClick: onDelete
      }, {
        children: _jsx(Cross, {
          className: cls(bem('preview-delete-icon'))
        })
      }));
    }

    return null;
  };

  const renderCover = () => {
    if (props.previewCoverRender) {
      const {
        index,
        item
      } = props;
      return _jsx("div", Object.assign({
        className: cls(bem('preview-cover'))
      }, {
        children: props.previewCoverRender(extend({
          index
        }, item))
      }));
    }

    return null;
  };

  const renderPreview = () => {
    const {
      item
    } = props;

    if (isImageFile(item)) {
      return _jsx(Image, Object.assign({
        fit: props.imageFit,
        src: item.content || item.url,
        className: cls(bem('preview-image')),
        width: props.previewSize,
        height: props.previewSize,
        onClick: onPreview
      }, {
        children: renderCover()
      }));
    }

    return _jsxs("div", Object.assign({
      className: cls(bem('file')),
      style: getSizeStyle(props.previewSize)
    }, {
      children: [_jsx(Description, {
        className: cls(bem('file-icon'))
      }), _jsx("div", Object.assign({
        className: cls(bem('file-name'), 'rv-ellipsis')
      }, {
        children: item.file ? item.file.name : item.url
      })), renderCover()]
    }));
  };

  return _jsxs("div", Object.assign({
    className: cls(bem('preview')),
    onClick: props.onClick
  }, {
    children: [renderPreview(), renderMask(), renderDeleteIcon()]
  }));
};