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