import { defineComponent, markRaw, ref, computed, onMounted, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createElementVNode, createCommentVNode, createVNode, withCtx, Fragment, createBlock, resolveDynamicComponent, renderList, withDirectives, vShow, renderSlot } from 'vue';
import { isNumber } from '@vueuse/core';
import '../../../hooks/index.mjs';
import { PsIcon } from '../../icon/index.mjs';
import { FullScreen, ScaleToOriginal, Close, ArrowLeft, ArrowRight, ZoomOut, ZoomIn, RefreshLeft, RefreshRight } from '@element-plus/icons-vue';
import { imageViewerProps } from './image-viewer.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useLocale } from '../../../hooks/use-locale/index.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useZIndex } from '../../../hooks/use-z-index/index.mjs';

const _hoisted_1 = ["src"];
const __default__ = {
  name: "PsImageViewer"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: imageViewerProps,
  setup(__props) {
    const props = __props;
    const Mode = {
      CONTAIN: {
        name: "contain",
        icon: markRaw(FullScreen)
      },
      ORIGINAL: {
        name: "original",
        icon: markRaw(ScaleToOriginal)
      }
    };
    const { t } = useLocale();
    const ns = useNamespace("image-viewer");
    const { nextZIndex } = useZIndex();
    const wrapper = ref();
    const imgRefs = ref([]);
    const index = ref(props.initialIndex);
    const mode = ref(Mode.CONTAIN);
    const transform = ref({
      scale: 1,
      deg: 0,
      offsetX: 0,
      offsetY: 0,
      enableTransition: false
    });
    const isSingle = computed(() => {
      const { urlList } = props;
      return urlList.length <= 1;
    });
    const isFirst = computed(() => {
      return index.value === 0;
    });
    const isLast = computed(() => {
      return index.value === props.urlList.length - 1;
    });
    const imgStyle = computed(() => {
      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;
      let translateX = offsetX / scale;
      let translateY = offsetY / scale;
      switch (deg % 360) {
        case 90:
        case -270:
          ;
          [translateX, translateY] = [translateY, -translateX];
          break;
        case 180:
        case -180:
          ;
          [translateX, translateY] = [-translateX, -translateY];
          break;
        case 270:
        case -90:
          ;
          [translateX, translateY] = [-translateY, translateX];
          break;
      }
      const style = {
        transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
        transition: enableTransition ? "transform .3s" : ""
      };
      if (mode.value.name === Mode.CONTAIN.name) {
        style.maxWidth = style.maxHeight = "100%";
      }
      return style;
    });
    const computedZIndex = computed(() => {
      return isNumber(props.zIndex) ? props.zIndex : nextZIndex();
    });
    onMounted(() => {
      var _a, _b;
      (_b = (_a = wrapper.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "wrapper",
        ref: wrapper,
        tabindex: -1,
        class: normalizeClass(unref(ns).e("wrapper")),
        style: normalizeStyle({ zIndex: unref(computedZIndex) })
      }, [
        createElementVNode("div", {
          class: normalizeClass(unref(ns).e("mask"))
        }, null, 2),
        createCommentVNode(" CLOSE "),
        createElementVNode("span", {
          class: normalizeClass([unref(ns).e("btn"), unref(ns).e("close")])
        }, [
          createVNode(unref(PsIcon), null, {
            default: withCtx(() => [
              createVNode(unref(Close))
            ]),
            _: 1
          })
        ], 2),
        createCommentVNode(" ARROW "),
        !unref(isSingle) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
          createElementVNode("span", {
            class: normalizeClass([
              unref(ns).e("btn"),
              unref(ns).e("prev"),
              unref(ns).is("disabled", !_ctx.infinite && unref(isFirst))
            ])
          }, [
            createVNode(unref(PsIcon), null, {
              default: withCtx(() => [
                createVNode(unref(ArrowLeft))
              ]),
              _: 1
            })
          ], 2),
          createElementVNode("span", {
            class: normalizeClass([
              unref(ns).e("btn"),
              unref(ns).e("next"),
              unref(ns).is("disabled", !_ctx.infinite && unref(isLast))
            ])
          }, [
            createVNode(unref(PsIcon), null, {
              default: withCtx(() => [
                createVNode(unref(ArrowRight))
              ]),
              _: 1
            })
          ], 2)
        ], 64)) : createCommentVNode("v-if", true),
        createCommentVNode(" ACTIONS "),
        createElementVNode("div", {
          class: normalizeClass([unref(ns).e("btn"), unref(ns).e("actions")])
        }, [
          createElementVNode("div", {
            class: normalizeClass(unref(ns).e("actions__inner"))
          }, [
            createVNode(unref(PsIcon), null, {
              default: withCtx(() => [
                createVNode(unref(ZoomOut))
              ]),
              _: 1
            }),
            createVNode(unref(PsIcon), null, {
              default: withCtx(() => [
                createVNode(unref(ZoomIn))
              ]),
              _: 1
            }),
            createElementVNode("i", {
              class: normalizeClass(unref(ns).e("actions__divider"))
            }, null, 2),
            createVNode(unref(PsIcon), null, {
              default: withCtx(() => [
                (openBlock(), createBlock(resolveDynamicComponent(mode.value.icon)))
              ]),
              _: 1
            }),
            createElementVNode("i", {
              class: normalizeClass(unref(ns).e("actions__divider"))
            }, null, 2),
            createVNode(unref(PsIcon), null, {
              default: withCtx(() => [
                createVNode(unref(RefreshLeft))
              ]),
              _: 1
            }),
            createVNode(unref(PsIcon), null, {
              default: withCtx(() => [
                createVNode(unref(RefreshRight))
              ]),
              _: 1
            })
          ], 2)
        ], 2),
        createCommentVNode(" CANVAS "),
        createElementVNode("div", {
          class: normalizeClass(unref(ns).e("canvas"))
        }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.urlList, (url, i) => {
            return withDirectives((openBlock(), createElementBlock("img", {
              ref_for: true,
              ref: (el) => imgRefs.value[i] = el,
              key: url,
              src: url,
              style: normalizeStyle(unref(imgStyle)),
              class: normalizeClass(unref(ns).e("img"))
            }, null, 14, _hoisted_1)), [
              [vShow, i === index.value]
            ]);
          }), 128))
        ], 2),
        renderSlot(_ctx.$slots, "default")
      ], 6);
    };
  }
});
var ImageViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/meng/workspace/element-ps/packages/components/image-viewer/src/image-viewer.vue"]]);

export { ImageViewer as default };
//# sourceMappingURL=image-viewer2.mjs.map
