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