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