import { useCssVars as D, unref as _, computed as b, ref as y, onMounted as F, reactive as M, resolveComponent as r, openBlock as k, createElementBlock as C, withDirectives as g, vModelText as w, createCommentVNode as N, createElementVNode as l, withKeys as B, withModifiers as E, normalizeClass as $, createVNode as n, withCtx as S, pushScopeId as K, popScopeId as T } from "vue";
import { useColor as h, addPost as A } from "./composables-5f691338.js";
import { _export_sfc as H } from "./_plugin-vue_export-helper-6a641814.js";
const u = (a) => (K("data-v-6295b026"), a = a(), T(), a), R = {
  class: "w-full flex flex-col p-2 shadow-xl m-1 rounded-2xl",
  action: "javascript:void(0);"
}, q = { class: "flex flex-wrap z-100" }, G = /* @__PURE__ */ u(() => /* @__PURE__ */ l("div", { class: "i-la-info-circle" }, null, -1)), J = /* @__PURE__ */ u(() => /* @__PURE__ */ l("div", { class: "i-mdi-text-long" }, null, -1)), L = [
  J
], O = /* @__PURE__ */ u(() => /* @__PURE__ */ l("div", { class: "flex-1" }, null, -1)), Q = { class: "flex justify-center flex-1" }, W = ["disabled"], X = /* @__PURE__ */ u(() => /* @__PURE__ */ l("div", { class: "i-la-check" }, null, -1)), Y = /* @__PURE__ */ u(() => /* @__PURE__ */ l("div", { class: "font-bold ml-2" }, "Submit", -1)), Z = [
  X,
  Y
], tt = /* @__PURE__ */ u(() => /* @__PURE__ */ l("div", { class: "i-la-trash-alt" }, null, -1)), et = [
  tt
], ot = {
  __name: "PostForm",
  props: {
    tag: {
      type: String,
      default: " "
    }
  },
  emits: ["close"],
  setup(a, { emit: U }) {
    const d = a;
    D((i) => ({
      "6bfbfa3c": _(V)
    }));
    const I = h("deep"), V = b(() => I.hex(d.tag)), f = y();
    F(() => {
      var i;
      (i = f.value) == null || i.focus();
    });
    const o = y({}), s = M({
      form: !1,
      youtube: !1,
      text: !1
    }), p = b(() => o.value.title || o.value.statement || o.value.text || o.value.cover);
    function v() {
      if (!p.value)
        return;
      const i = {
        ...o.value
      };
      A(d.tag, i), m();
    }
    function m() {
      s.form = !1, o.value = {}, U("close");
    }
    return (i, t) => {
      const c = r("form-picture"), P = r("form-link"), j = r("form-youtube"), x = r("ui-layer"), z = r("form-text");
      return k(), C("form", R, [
        s.title ? g((k(), C("input", {
          key: 0,
          class: "font-bold text-xl dark-bg-dark-200",
          ref_key: "titleInput",
          ref: f,
          "onUpdate:modelValue": t[0] || (t[0] = (e) => o.value.title = e),
          placeholder: "Title",
          autofocus: ""
        }, null, 512)), [
          [w, o.value.title]
        ]) : N("", !0),
        g(l("textarea", {
          class: "text-1rem leading-relaxed dark-bg-dark-200",
          "onUpdate:modelValue": t[1] || (t[1] = (e) => o.value.statement = e),
          placeholder: "Short text statement",
          onKeyup: t[2] || (t[2] = B(E((e) => v(), ["ctrl"]), ["enter"]))
        }, null, 544), [
          [w, o.value.statement]
        ]),
        l("div", q, [
          l("button", {
            class: $(["button m-1", { active: o.value.title }]),
            title: "Add a heading",
            onClick: t[3] || (t[3] = (e) => s.title = !s.title)
          }, "H1", 2),
          n(c, {
            field: "icon",
            options: { picSize: 400, preserveRatio: !1 },
            onUpdate: t[4] || (t[4] = (e) => o.value.icon = e)
          }, {
            default: S(() => [
              G
            ]),
            _: 1
          }),
          n(c, {
            onUpdate: t[5] || (t[5] = (e) => o.value.cover = e)
          }),
          n(P, {
            onUpdate: t[6] || (t[6] = (e) => o.value.link = e)
          }),
          n(j, {
            onUpdate: t[7] || (t[7] = (e) => o.value.youtube = e)
          }),
          l("button", {
            class: $(["m-1 button", { active: o.value.text }]),
            onClick: t[8] || (t[8] = (e) => s.text = !0)
          }, L, 2),
          O,
          l("div", Q, [
            l("button", {
              class: "plus button flex-1 justify-center m-1",
              disabled: !_(p),
              type: "submit",
              onClick: t[9] || (t[9] = (e) => v())
            }, Z, 8, W),
            l("button", {
              class: "m-1 button text-xl",
              onClick: t[10] || (t[10] = (e) => m())
            }, et)
          ])
        ]),
        n(x, {
          open: s.youtube,
          offset: "22vh",
          onClose: t[11] || (t[11] = (e) => s.youtube = !1)
        }, null, 8, ["open"]),
        n(x, {
          open: s.text,
          offset: "22vh",
          onClose: t[14] || (t[14] = (e) => s.text = !1)
        }, {
          default: S(() => [
            n(z, {
              text: o.value.text,
              "onUpdate:text": t[12] || (t[12] = (e) => o.value.text = e),
              onClose: t[13] || (t[13] = (e) => s.text = !1)
            }, null, 8, ["text"])
          ]),
          _: 1
        }, 8, ["open"])
      ]);
    };
  }
}, it = /* @__PURE__ */ H(ot, [["__scopeId", "data-v-6295b026"]]);
export {
  it as default
};
//# sourceMappingURL=PostForm-168c80c0.js.map
