import { DtIconClose as v, DtIconArrowLeft as E, DtIconArrowRight as T } from "@dialpad/dialtone-icons/vue3";
import { DialtoneLocalization as L } from "../../localization/index.js";
import { createElementBlock as n, openBlock as i, normalizeStyle as R, createElementVNode as h, resolveComponent as s, createVNode as c, createBlock as b, createCommentVNode as C, withCtx as f, withDirectives as A, Fragment as D, renderList as x, resolveDynamicComponent as O, vShow as w } from "vue";
import { _ as p } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import I from "../button/button.js";
import B from "../image-viewer/image-viewer.js";
const y = {
  compatConfig: { MODE: 3 },
  name: "DtProgressBar",
  props: {
    ariaLabel: {
      type: String,
      required: !0
    },
    progress: {
      type: Number,
      default: 20
    }
  },
  data: () => ({
    circleCircumference: 50
  }),
  computed: {
    cssVars() {
      return {
        "--stroke-dashoffset": this.circleCircumference - this.circleCircumference * this.progress / 100,
        "--stroke-dasharray": this.circleCircumference
      };
    }
  },
  mounted() {
    this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();
  }
}, M = ["aria-label", "aria-valuenow"], S = {
  ref: "progressbarCircle",
  r: "8",
  cx: "12",
  cy: "12",
  class: "d-recipe-attachment-carousel__progress-bar-circle"
};
function N(e, o, r, g, a, t) {
  return i(), n("div", {
    role: "progressbar",
    "aria-label": r.ariaLabel,
    tabindex: "-1",
    "aria-valuenow": r.progress,
    "aria-valuemin": "0",
    "aria-valuemax": "100"
  }, [
    (i(), n("svg", {
      class: "d-recipe-attachment-carousel__progress-bar",
      style: R(t.cssVars)
    }, [
      h("circle", S, null, 512),
      o[0] || (o[0] = h("circle", {
        r: "8",
        cx: "12",
        cy: "12",
        class: "d-recipe-attachment-carousel__progress-bar-circle"
      }, null, -1))
    ], 4))
  ], 8, M);
}
const $ = /* @__PURE__ */ p(y, [["render", N]]), k = {
  compatConfig: { MODE: 3 },
  name: "DtImageCarousel",
  components: {
    DtImageViewer: B,
    DtButton: I,
    DtIconClose: v,
    DtProgressBar: $
  },
  props: {
    mediaItem: {
      type: Object,
      required: !0
    },
    index: {
      type: Number,
      required: !0
    }
  },
  emits: [
    /**
     * Emitted when media close button is clicked to remove the image
     *
     * @event remove-media
     * @type {Number}
     */
    "remove-media"
  ],
  data() {
    return {
      i18n: new L()
    };
  },
  computed: {
    closeButtonTitle() {
      return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
    }
  },
  methods: {
    removeMediaItem(e) {
      this.$emit("remove-media", e);
    }
  }
}, W = { class: "d-recipe-attachment-carousel__image" }, z = { class: "d-recipe-attachment-carousel__image-top-right" };
function V(e, o, r, g, a, t) {
  const d = s("dt-image-viewer"), m = s("dt-progress-bar"), u = s("dt-icon-close"), l = s("dt-button");
  return i(), n("li", W, [
    c(d, {
      "image-button-class": "d-recipe-attachment-carousel__image-viewer",
      "image-src": r.mediaItem.path,
      "image-alt": r.mediaItem.altText,
      "aria-label": a.i18n.$t("DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL")
    }, null, 8, ["image-src", "image-alt", "aria-label"]),
    h("div", z, [
      r.mediaItem.isUploading ? (i(), b(m, {
        key: 0,
        class: "d-recipe-attachment-carousel__image-progress-bar",
        progress: r.mediaItem.progress,
        "aria-label": a.i18n.$t("DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL")
      }, null, 8, ["progress", "aria-label"])) : C("", !0),
      c(l, {
        id: `closeButton-${r.index}`,
        tabindex: "0",
        class: "d-recipe-attachment-carousel__image-close-button",
        circle: "",
        size: "xs",
        importance: "clear",
        "aria-label": t.closeButtonTitle,
        title: t.closeButtonTitle,
        onClick: o[0] || (o[0] = (_) => t.removeMediaItem(r.index))
      }, {
        icon: f(() => [
          c(u, { size: "200" })
        ]),
        _: 1
      }, 8, ["id", "aria-label", "title"])
    ])
  ]);
}
const F = /* @__PURE__ */ p(k, [["render", V]]), U = 64, G = {
  compatConfig: { MODE: 3 },
  name: "DtRecipeAttachmentCarousel",
  components: {
    DtButton: I,
    DtIconArrowRight: T,
    DtIconArrowLeft: E,
    DtImageCarousel: F
  },
  /* inheritAttrs: false is generally an option we want to set on library
    components. This allows any attributes passed in that are not recognized
    as props to be passed down to another element or component using v-bind:$attrs
    more info: https://vuejs.org/v2/api/#inheritAttrs */
  // inheritAttrs: false,
  props: {
    /**
     * media - object array of media objects
     * @type {Array}
     *
     * Object: {
     *  path: String,
     *  altText: String | null,
     * }
     */
    mediaList: {
      type: Array,
      default: () => []
    }
  },
  emits: [
    /**
     * Emitted when popover is shown or hidden
     *
     * @event remove-media
     * @type {Number}
     */
    "remove-media"
  ],
  data() {
    return {
      showCloseButton: {},
      showRightArrow: !0,
      showLeftArrow: !1,
      isMounted: !1,
      i18n: new L()
    };
  },
  computed: {
    filteredMediaList() {
      return this.mediaList.filter((e) => e.type === "image" || e.type === "video");
    }
  },
  mounted: function() {
    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0, this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;
  },
  methods: {
    onItemFocus(e) {
      e.currentTarget.scrollIntoView({ behavior: "smooth" });
    },
    mediaComponent(e) {
      switch (e) {
        case "image":
          return "dt-image-carousel";
        default:
          return null;
      }
    },
    removeMediaItem(e) {
      this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth + U, this.$emit("remove-media", e);
    },
    closeButton(e, o) {
      this.showCloseButton[o] = e;
    },
    handleScroll() {
      const e = this.$refs.carousel;
      this.showLeftArrow = e.scrollLeft > 0, this.showRightArrow = e.scrollLeft + e.clientWidth !== e.scrollWidth;
    },
    leftScroll() {
      this.$refs.carousel.scrollTo({
        left: this.$refs.carousel.scrollLeft - 100,
        behavior: "smooth"
      });
    },
    rightScroll() {
      this.$refs.carousel.scrollTo({
        left: this.$refs.carousel.scrollLeft + 100,
        behavior: "smooth"
      });
    }
  }
}, H = {
  class: "d-recipe-attachment-carousel",
  role: "presentation"
};
function P(e, o, r, g, a, t) {
  const d = s("dt-icon-arrow-left"), m = s("dt-button"), u = s("dt-icon-arrow-right");
  return i(), n("div", H, [
    r.mediaList.length > 0 ? (i(), n("ul", {
      key: 0,
      ref: "carousel",
      class: "d-recipe-attachment-carousel__media-list",
      onScroll: o[0] || (o[0] = (...l) => t.handleScroll && t.handleScroll(...l))
    }, [
      (i(!0), n(D, null, x(t.filteredMediaList, (l, _) => (i(), b(O(t.mediaComponent(l.type)), {
        key: `media-${_}`,
        index: _,
        "media-item": l,
        onRemoveMedia: (q) => t.removeMediaItem(_),
        onFocusin: t.onItemFocus
      }, null, 40, ["index", "media-item", "onRemoveMedia", "onFocusin"]))), 128))
    ], 544)) : C("", !0),
    A(c(m, {
      tabindex: "-1",
      "aria-label": a.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL"),
      class: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left",
      circle: "",
      size: "xs",
      importance: "clear",
      onClick: t.leftScroll
    }, {
      icon: f(() => [
        c(d, { size: "100" })
      ]),
      _: 1
    }, 8, ["aria-label", "onClick"]), [
      [w, a.showLeftArrow]
    ]),
    A(c(m, {
      tabindex: "-1",
      "aria-label": a.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL"),
      class: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right",
      circle: "",
      size: "xs",
      importance: "clear",
      onClick: t.rightScroll
    }, {
      icon: f(() => [
        c(u, { size: "100" })
      ]),
      _: 1
    }, 8, ["aria-label", "onClick"]), [
      [w, a.showRightArrow]
    ])
  ]);
}
const Z = /* @__PURE__ */ p(G, [["render", P]]);
export {
  Z as default
};
//# sourceMappingURL=attachment-carousel.js.map
