import { defineComponent as x, useCssModule as B, inject as I, computed as h, toValue as y, openBlock as d, createElementBlock as M, unref as e, normalizeClass as s, createVNode as v, createBlock as N, withModifiers as $, withCtx as q, createCommentVNode as w, renderSlot as z } from "vue";
import { t as U } from "./locale.js";
import V from "./Button.js";
import A from "./Icon.js";
import { _ as E } from "./Image.vue_vue_type_script_setup_true_lang-BZnhM2bg.js";
import { T as _ } from "./ThumbnailGroup.keys-EJ4qFNhx.js";
import { _ as F } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const H = ["aria-current", "draggable"], J = /* @__PURE__ */ x({
  __name: "Thumbnail",
  props: {
    thumbnail: {},
    altText: { default: "" },
    variant: { default: "opaque" }
  },
  emits: ["remove", "click"],
  setup(r, { emit: f }) {
    const l = r, m = f, t = B(), { thumbnails: p, activeThumbnail: n, draggable: g, isDragging: c, radius: i, removable: u } = I(
      _.key,
      _.defaults
    ), a = h(() => y(p).findIndex((o) => o === l.thumbnail)), k = h(() => l.thumbnail.imageUrl);
    function C() {
      n.value = a.value, m("click", a.value);
    }
    function T() {
      m("remove", a.value), n.value = -1;
    }
    return (o, b) => (d(), M("li", {
      class: s(["stash-thumbnail focus-visible:outline-hidden group relative cursor-pointer", [
        {
          [e(t)["thumbnail-translucent"]]: l.variant === "translucent",
          [e(t)["thumbnail-opaque"]]: l.variant === "opaque",
          [e(t)["thumbnail-removable"]]: e(u),
          [e(t)["thumbnail-circle"]]: e(i) === "circle",
          [e(t)["thumbnail-rounded"]]: e(i) === "rounded"
        }
      ]]),
      "aria-current": e(n) === a.value,
      draggable: e(g),
      "data-test": "stash-thumbnail",
      tabindex: "0",
      onClick: b[0] || (b[0] = (R) => C())
    }, [
      v(E, {
        class: s(["stash-thumbnail__img border-ice-200 outline-blue-500/15 transition-colors", [
          e(t)["thumbnail-img"],
          {
            [e(t)["thumbnail-mask"]]: e(u) && e(i) !== "circle",
            [e(t)["thumbnail-active"]]: e(n) === a.value && !e(c),
            "group-hover:border-blue-500 group-focus-visible:border-blue-500 group-focus-visible:outline": !e(c)
          }
        ]]),
        "data-test": "stash-thumbnail|img",
        radius: e(i),
        src: k.value,
        alt: r.altText
      }, null, 8, ["class", "radius", "src", "alt"]),
      e(u) ? (d(), N(V, {
        key: 0,
        class: s(["stash-thumbnail__remove", [e(t)["thumbnail-remove"]]]),
        "data-test": "stash-thumbnail|remove",
        "aria-label": e(U)("ll.thumbnail.removeButton", { index: a.value + 1 }),
        type: "button",
        icon: "",
        onClick: $(T, ["stop", "prevent"])
      }, {
        default: q(() => [
          v(A, {
            name: "close",
            size: "small"
          })
        ]),
        _: 1
      }, 8, ["class", "aria-label"])) : w("", !0),
      z(o.$slots, "hint")
    ], 10, H));
  }
}), K = {
  "thumbnail-remove": "_thumbnail-remove_F8Jz8",
  "thumbnail-img": "_thumbnail-img_K7flH",
  "thumbnail-translucent": "_thumbnail-translucent_0TF2n",
  "thumbnail-active": "_thumbnail-active_pkwRd",
  "thumbnail-mask": "_thumbnail-mask_LCcK6",
  "thumbnail-full": "_thumbnail-full_SAfnu",
  "thumbnail-rounded": "_thumbnail-rounded_c5leg"
}, L = {
  $style: K
}, W = /* @__PURE__ */ F(J, [["__cssModules", L]]);
export {
  W as default
};
//# sourceMappingURL=Thumbnail.js.map
