import { defineComponent, shallowRef, onMounted, onBeforeUnmount, watch, computed, createVNode, Transition, withDirectives, vShow } from 'vue';
import { DeleteOutlined, DownloadOutlined, EyeOutlined } from '@ant-design/icons-vue';
import '../../../../vue-components/index.mjs';
import '../../../../utils/index.mjs';
import { Tooltip } from '../../../tooltip/index.mjs';
import { Progress } from '../../../progress/index.mjs';
import useConfigInject from '../../../config-provider/src/hooks/useConfigInject.mjs';
import { objectType, arrayType, stringType, functionType, booleanType } from '../../../../utils/vue/propType.mjs';
import { getTransitionProps } from '../../../../vue-components/transition/src/transition.mjs';

function listItemProps() {
  return {
    prefixCls: String,
    locale: objectType(void 0),
    file: objectType(),
    items: arrayType(),
    listType: stringType(),
    isImgUrl: functionType(),
    showRemoveIcon: booleanType(),
    showDownloadIcon: booleanType(),
    showPreviewIcon: booleanType(),
    removeIcon: functionType(),
    downloadIcon: functionType(),
    previewIcon: functionType(),
    iconRender: functionType(),
    actionIconRender: functionType(),
    itemRender: functionType(),
    onPreview: functionType(),
    onClose: functionType(),
    onDownload: functionType(),
    progress: objectType()
  };
}
var ListItem = /* @__PURE__ */ defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ListItem",
  inheritAttrs: false,
  props: listItemProps(),
  setup(props, {
    slots,
    attrs
  }) {
    var _a;
    const showProgress = shallowRef(false);
    const progressRafRef = shallowRef();
    onMounted(() => {
      progressRafRef.value = setTimeout(() => {
        showProgress.value = true;
      }, 300);
    });
    onBeforeUnmount(() => {
      clearTimeout(progressRafRef.value);
    });
    const mergedStatus = shallowRef((_a = props.file) == null ? void 0 : _a.status);
    watch(() => {
      var _a2;
      return (_a2 = props.file) == null ? void 0 : _a2.status;
    }, (status) => {
      if (status !== "removed")
        mergedStatus.value = status;
    });
    const {
      rootPrefixCls
    } = useConfigInject("upload", props);
    const transitionProps = computed(() => getTransitionProps(`${rootPrefixCls.value}-fade`));
    return () => {
      var _a2, _b;
      const {
        prefixCls,
        locale,
        listType,
        file,
        items,
        progress: progressProps,
        iconRender = slots.iconRender,
        actionIconRender = slots.actionIconRender,
        itemRender = slots.itemRender,
        isImgUrl,
        showPreviewIcon,
        showRemoveIcon,
        showDownloadIcon,
        previewIcon: customPreviewIcon = slots.previewIcon,
        removeIcon: customRemoveIcon = slots.removeIcon,
        downloadIcon: customDownloadIcon = slots.downloadIcon,
        onPreview,
        onDownload,
        onClose
      } = props;
      const {
        class: className,
        style
      } = attrs;
      const iconNode = iconRender({
        file
      });
      let icon = createVNode("div", {
        "class": `${prefixCls}-text-icon`
      }, [iconNode]);
      if (listType === "picture" || listType === "picture-card") {
        if (mergedStatus.value === "uploading" || !file.thumbUrl && !file.url) {
          const uploadingClassName = {
            [`${prefixCls}-list-item-thumbnail`]: true,
            [`${prefixCls}-list-item-file`]: mergedStatus.value !== "uploading"
          };
          icon = createVNode("div", {
            "class": uploadingClassName
          }, [iconNode]);
        } else {
          const thumbnail = (isImgUrl == null ? void 0 : isImgUrl(file)) ? createVNode("img", {
            "src": file.thumbUrl || file.url,
            "alt": file.name,
            "class": `${prefixCls}-list-item-image`,
            "crossorigin": file.crossOrigin
          }, null) : iconNode;
          const aClassName = {
            [`${prefixCls}-list-item-thumbnail`]: true,
            [`${prefixCls}-list-item-file`]: isImgUrl && !isImgUrl(file)
          };
          icon = createVNode("a", {
            "class": aClassName,
            "onClick": (e) => onPreview(file, e),
            "href": file.url || file.thumbUrl,
            "target": "_blank",
            "rel": "noopener noreferrer"
          }, [thumbnail]);
        }
      }
      const infoUploadingClass = {
        [`${prefixCls}-list-item`]: true,
        [`${prefixCls}-list-item-${mergedStatus.value}`]: true
      };
      const linkProps = typeof file.linkProps === "string" ? JSON.parse(file.linkProps) : file.linkProps;
      const removeIcon = showRemoveIcon ? actionIconRender({
        customIcon: customRemoveIcon ? customRemoveIcon({
          file
        }) : createVNode(DeleteOutlined, null, null),
        callback: () => onClose(file),
        prefixCls,
        title: locale.removeFile
      }) : null;
      const downloadIcon = showDownloadIcon && mergedStatus.value === "done" ? actionIconRender({
        customIcon: customDownloadIcon ? customDownloadIcon({
          file
        }) : createVNode(DownloadOutlined, null, null),
        callback: () => onDownload(file),
        prefixCls,
        title: locale.downloadFile
      }) : null;
      const downloadOrDelete = listType !== "picture-card" && createVNode("span", {
        "key": "download-delete",
        "class": [`${prefixCls}-list-item-actions`, {
          picture: listType === "picture"
        }]
      }, [downloadIcon, removeIcon]);
      const listItemNameClass = `${prefixCls}-list-item-name`;
      const fileName = file.url ? [createVNode("a", {
        "key": "view",
        "target": "_blank",
        "rel": "noopener noreferrer",
        "class": listItemNameClass,
        "title": file.name,
        ...linkProps,
        "href": file.url,
        "onClick": (e) => onPreview(file, e)
      }, [file.name]), downloadOrDelete] : [createVNode("span", {
        "key": "view",
        "class": listItemNameClass,
        "onClick": (e) => onPreview(file, e),
        "title": file.name
      }, [file.name]), downloadOrDelete];
      const previewStyle = {
        pointerEvents: "none",
        opacity: 0.5
      };
      const previewIcon = showPreviewIcon ? createVNode("a", {
        "href": file.url || file.thumbUrl,
        "target": "_blank",
        "rel": "noopener noreferrer",
        "style": file.url || file.thumbUrl ? void 0 : previewStyle,
        "onClick": (e) => onPreview(file, e),
        "title": locale.previewFile
      }, [customPreviewIcon ? customPreviewIcon({
        file
      }) : createVNode(EyeOutlined, null, null)]) : null;
      const pictureCardActions = listType === "picture-card" && mergedStatus.value !== "uploading" && createVNode("span", {
        "class": `${prefixCls}-list-item-actions`
      }, [previewIcon, mergedStatus.value === "done" && downloadIcon, removeIcon]);
      const dom = createVNode("div", {
        "class": infoUploadingClass
      }, [icon, fileName, pictureCardActions, showProgress.value && createVNode(Transition, transitionProps.value, {
        default: () => [withDirectives(createVNode("div", {
          "class": `${prefixCls}-list-item-progress`
        }, ["percent" in file ? createVNode(Progress, {
          ...progressProps,
          "type": "line",
          "percent": file.percent
        }, null) : null]), [[vShow, mergedStatus.value === "uploading"]])]
      })]);
      const listContainerNameClass = {
        [`${prefixCls}-list-item-container`]: true,
        [`${className}`]: !!className
      };
      const message = file.response && typeof file.response === "string" ? file.response : ((_a2 = file.error) == null ? void 0 : _a2.statusText) || ((_b = file.error) == null ? void 0 : _b.message) || locale.uploadError;
      const item = mergedStatus.value === "error" ? createVNode(Tooltip, {
        "title": message,
        "getPopupContainer": (node) => node.parentNode
      }, {
        default: () => [dom]
      }) : dom;
      return createVNode("div", {
        "class": listContainerNameClass,
        "style": style
      }, [itemRender ? itemRender({
        originNode: item,
        file,
        fileList: items,
        actions: {
          download: onDownload.bind(null, file),
          preview: onPreview.bind(null, file),
          remove: onClose.bind(null, file)
        }
      }) : item]);
    };
  }
});

export { ListItem as default, listItemProps };
//# sourceMappingURL=ListItem.mjs.map
