import { ref as i, watch as p, openBlock as r, createElementBlock as b, createBaseVNode as t, normalizeClass as f, createVNode as _, withCtx as x, withDirectives as h, vModelText as k, createBlock as w, unref as c, createCommentVNode as y, pushScopeId as C, popScopeId as g } from "./composables-Ci32s3jE.js";
import { EmbedYoutube as B, UiLayer as I } from "./components.js";
import { _export_sfc as S } from "./_plugin-vue_export-helper-DueaC3du.js";
const n = (l) => (C("data-v-5b0b5d4d"), l = l(), g(), l), V = { class: "flex flex-wrap" }, Y = /* @__PURE__ */ n(() => /* @__PURE__ */ t("div", { class: "i-la-youtube" }, null, -1)), $ = [
  Y
], E = { class: "p-4 text-lg" }, N = { class: "flex items-center mb-2 gap-2" }, F = /* @__PURE__ */ n(() => /* @__PURE__ */ t("div", { class: "i-la-youtube text-2xl" }, null, -1)), L = /* @__PURE__ */ n(() => /* @__PURE__ */ t("div", { class: "text-xl ml-2" }, "Add a youtube video", -1)), P = /* @__PURE__ */ n(() => /* @__PURE__ */ t("div", { class: "flex-1" }, null, -1)), U = { class: "button text-xl" }, z = { class: "button text-xl" }, A = {
  __name: "FormYoutube",
  props: {
    id: { type: String, default: "" }
  },
  emits: ["update", "close"],
  setup(l, { emit: v }) {
    const a = i(), d = v, s = i();
    p(a, (u) => {
      u ? d("update", m(u)) : d("update", null);
    });
    function m(u) {
      var e = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=|\?v=)([^#&?]*).*/, o = u.match(e);
      return o && o[2].length == 11 ? o[2] : null;
    }
    return (u, e) => (r(), b("div", V, [
      t("button", {
        class: f(["button m-1", { active: a.value }]),
        onClick: e[0] || (e[0] = (o) => s.value = !s.value)
      }, $, 2),
      _(c(I), {
        open: s.value,
        offset: "12vh",
        onClose: e[4] || (e[4] = (o) => s.value = !1)
      }, {
        default: x(() => [
          t("div", E, [
            t("div", N, [
              F,
              L,
              P,
              t("button", U, [
                t("div", {
                  class: "i-la-check",
                  onClick: e[1] || (e[1] = (o) => s.value = !1)
                })
              ]),
              t("button", z, [
                t("div", {
                  class: "i-la-trash-alt",
                  onClick: e[2] || (e[2] = (o) => {
                    a.value = null, s.value = !1;
                  })
                })
              ])
            ]),
            h(t("input", {
              class: "p-4 my-4 w-full border-1 border-dark-300",
              "onUpdate:modelValue": e[3] || (e[3] = (o) => a.value = o),
              autofocus: "",
              placeholder: "Paste a Youtube video link"
            }, null, 512), [
              [k, a.value]
            ]),
            l.id ? (r(), w(c(B), {
              key: 0,
              class: "min-w-80vw mt-2",
              video: l.id
            }, null, 8, ["video"])) : y("", !0)
          ])
        ]),
        _: 1
      }, 8, ["open"])
    ]));
  }
}, j = /* @__PURE__ */ S(A, [["__scopeId", "data-v-5b0b5d4d"]]);
export {
  j as default
};
//# sourceMappingURL=FormYoutube-X-9aCZJ7.js.map
