import { DtIconLink2 as E } from "@dialpad/dialtone-icons/vue3";
import f from "./message-input-button.js";
import { DialtoneLocalization as N } from "../../localization/index.js";
import { resolveComponent as r, createBlock as T, openBlock as B, withCtx as a, createVNode as l, createElementVNode as A, toDisplayString as u, withKeys as L, withModifiers as p, createTextVNode as d } from "vue";
import { _ as g } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import v from "../stack/stack.js";
import O from "../button/button.js";
import S from "../input/input.js";
import x from "../popover/popover.js";
const D = {
  compatConfig: { MODE: 3 },
  name: "MessageInputLink",
  components: {
    DtPopover: x,
    DtInput: S,
    DtButton: O,
    DtStack: v,
    DtIconLink2: E,
    DtRecipeMessageInputButton: f
  },
  props: {
    open: {
      type: Boolean,
      default: !1
    },
    linkButtonOptions: {
      type: Object,
      required: !0
    },
    isSelectionActive: {
      type: Function,
      default: () => {
      }
    }
  },
  emits: ["set-link", "remove-link", "opened"],
  data() {
    return {
      linkText: "",
      linkInput: "",
      isOpen: !1,
      i18n: new N()
    };
  },
  computed: {
    anchorButtonLabel() {
      return this.i18n.$ta("DIALTONE_MESSAGE_INPUT_LINK_BUTTON_LABEL");
    },
    textInputLabel() {
      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_TEXT_LABEL");
    },
    linkInputLabel() {
      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_LINK_LABEL");
    },
    linkInputPlaceHolder() {
      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_LINK_PLACEHOLDER");
    },
    removeButtonLabel() {
      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_REMOVE_LABEL");
    },
    cancelButtonLabel() {
      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_CANCEL_LABEL");
    },
    confirmButtonLabel() {
      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_CONFIRM_LABEL");
    }
  },
  watch: {
    open: {
      immediate: !0,
      handler(o) {
        this.isOpen = o;
      }
    }
  },
  methods: {
    setInitialValues(o, t) {
      this.linkText = o, this.linkInput = t;
    }
  }
}, M = { class: "d-recipe-message-input__link-dialog-title" };
function C(o, t, k, K, e, n) {
  const b = r("dt-icon-link2"), c = r("dt-recipe-message-input-button"), _ = r("dt-input"), s = r("dt-button"), m = r("dt-stack"), I = r("dt-popover");
  return B(), T(I, {
    open: e.isOpen,
    placement: "bottom-start",
    "content-class": "d-recipe-message-input__link-popover",
    "data-qa": "dt-message-input-link-popover",
    "show-close-button": !1,
    onOpened: t[12] || (t[12] = (i) => o.$emit("opened", i))
  }, {
    anchor: a(() => [
      l(c, {
        "aria-label": n.anchorButtonLabel["aria-label"],
        "tooltip-text": n.anchorButtonLabel["tooltip-text"],
        "keyboard-shortcut-text": k.linkButtonOptions.keyboardShortcutText,
        "data-qa": "message-input-link-btn",
        "is-active": k.isSelectionActive("link"),
        onClick: t[0] || (t[0] = (i) => e.isOpen = !0)
      }, {
        icon: a(() => [
          l(b, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"])
    ]),
    content: a(() => [
      l(m, { gap: "500" }, {
        default: a(() => [
          A("div", M, u(e.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_DIALOG_TITLE")), 1),
          l(_, {
            modelValue: e.linkText,
            "onUpdate:modelValue": t[1] || (t[1] = (i) => e.linkText = i),
            "input-aria-label": n.textInputLabel,
            size: "xs",
            "data-qa": "dt-message-input-link-text-input",
            label: n.textInputLabel,
            "input-wrapper-class": "d-recipe-message-input__link-input",
            onClick: t[2] || (t[2] = p(() => {
            }, ["stop"])),
            onFocus: t[3] || (t[3] = p(() => {
            }, ["stop"])),
            onKeydown: t[4] || (t[4] = L((i) => o.$emit("set-link", e.linkText, e.linkInput), ["enter"]))
          }, null, 8, ["modelValue", "input-aria-label", "label"]),
          l(_, {
            modelValue: e.linkInput,
            "onUpdate:modelValue": t[5] || (t[5] = (i) => e.linkInput = i),
            "input-aria-label": n.linkInputLabel,
            size: "xs",
            "data-qa": "dt-message-input-link-input",
            placeholder: n.linkInputPlaceHolder,
            label: n.linkInputLabel,
            "input-wrapper-class": "d-recipe-message-input__link-input",
            onClick: t[6] || (t[6] = p(() => {
            }, ["stop"])),
            onFocus: t[7] || (t[7] = p(() => {
            }, ["stop"])),
            onKeydown: t[8] || (t[8] = L((i) => o.$emit("set-link", e.linkText, e.linkInput), ["enter"]))
          }, null, 8, ["modelValue", "input-aria-label", "placeholder", "label"]),
          l(m, {
            direction: "row",
            class: "d-recipe-message-input__link-dialog-buttons"
          }, {
            default: a(() => [
              l(s, {
                "aria-label": n.removeButtonLabel,
                title: n.removeButtonLabel,
                importance: "clear",
                kind: "danger",
                size: "md",
                "data-qa": "dt-message-input-link-remove-btn",
                onClick: t[9] || (t[9] = (i) => o.$emit("remove-link", e.linkText, e.linkInput))
              }, {
                default: a(() => [
                  d(u(n.removeButtonLabel), 1)
                ]),
                _: 1
              }, 8, ["aria-label", "title"]),
              l(m, {
                direction: "row",
                gap: "400"
              }, {
                default: a(() => [
                  l(s, {
                    "aria-label": n.cancelButtonLabel,
                    title: n.cancelButtonLabel,
                    importance: "clear",
                    kind: "muted",
                    size: "md",
                    "data-qa": "dt-message-input-link-cancel-btn",
                    onClick: t[10] || (t[10] = (i) => e.isOpen = !1)
                  }, {
                    default: a(() => [
                      d(u(n.cancelButtonLabel), 1)
                    ]),
                    _: 1
                  }, 8, ["aria-label", "title"]),
                  l(s, {
                    size: "md",
                    "aria-label": n.confirmButtonLabel,
                    title: n.confirmButtonLabel,
                    "data-qa": "dt-message-input-link-confirm-btn",
                    onClick: t[11] || (t[11] = (i) => o.$emit("set-link", e.linkText, e.linkInput))
                  }, {
                    default: a(() => [
                      d(u(n.confirmButtonLabel), 1)
                    ]),
                    _: 1
                  }, 8, ["aria-label", "title"])
                ]),
                _: 1
              })
            ]),
            _: 1
          })
        ]),
        _: 1
      })
    ]),
    _: 1
  }, 8, ["open"]);
}
const F = /* @__PURE__ */ g(D, [["render", C]]);
export {
  F as default
};
//# sourceMappingURL=message-input-link.js.map
