import React, { useContext } from "react";
import classnames from "classnames";
import { isImageFile } from "./utils";
import { isDef, getSizeStyle, extend } from "../utils";
import { callInterceptor } from "../utils/interceptor";
import Icon from "../icon";
import Image from "../image";
import Loading from "../loading";
import ConfigProviderContext from "../config-provider/ConfigProviderContext";
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" ? /* @__PURE__ */ React.createElement(Icon, {
        name: "close",
        className: classnames(bem("mask-icon"))
      }) : /* @__PURE__ */ React.createElement(Loading, {
        className: classnames(bem("loading"))
      });
      const showMessage = isDef(message) && message !== "";
      return /* @__PURE__ */ React.createElement("div", {
        className: classnames(bem("mask"))
      }, MaskIcon, showMessage && /* @__PURE__ */ React.createElement("div", {
        className: classnames(bem("mask-message"))
      }, 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 ? void 0 : _a.call(props);
      }
    });
  };
  const onPreview = () => {
    if (props.onPreview)
      props.onPreview();
  };
  const renderDeleteIcon = () => {
    if (props.deletable && props.item.status !== "uploading") {
      return /* @__PURE__ */ React.createElement("div", {
        className: classnames(bem("preview-delete")),
        onClick: onDelete
      }, /* @__PURE__ */ React.createElement(Icon, {
        name: "cross",
        className: classnames(bem("preview-delete-icon"))
      }));
    }
    return null;
  };
  const renderCover = () => {
    if (props.previewCoverRender) {
      const {
        index,
        item
      } = props;
      return /* @__PURE__ */ React.createElement("div", {
        className: classnames(bem("preview-cover"))
      }, props.previewCoverRender(extend({
        index
      }, item)));
    }
    return null;
  };
  const renderPreview = () => {
    const {
      item
    } = props;
    if (isImageFile(item)) {
      return /* @__PURE__ */ React.createElement(Image, {
        fit: props.imageFit,
        src: item.content || item.url,
        className: classnames(bem("preview-image")),
        width: props.previewSize,
        height: props.previewSize,
        onClick: onPreview
      }, renderCover());
    }
    return /* @__PURE__ */ React.createElement("div", {
      className: classnames(bem("file")),
      style: getSizeStyle(props.previewSize)
    }, /* @__PURE__ */ React.createElement(Icon, {
      className: classnames(bem("file-icon")),
      name: "description"
    }), /* @__PURE__ */ React.createElement("div", {
      className: classnames(bem("file-name"), "rc-ellipsis")
    }, item.file ? item.file.name : item.url), renderCover());
  };
  return /* @__PURE__ */ React.createElement("div", {
    className: classnames(bem("preview")),
    onClick: props.onClick
  }, renderPreview(), renderMask(), renderDeleteIcon());
};
export {
  UploaderPreviewItem
};
