import * as vue from "vue";
import { defineComponent, unref, withCtx, createVNode, isRef, openBlock, createBlock, Fragment, renderList, toDisplayString, withModifiers, useSSRContext } from "vue";
import { ssrRenderAttrs, ssrRenderComponent, ssrRenderList, ssrRenderClass, ssrInterpolate, ssrRenderAttr } from "vue/server-renderer";
import { q as objectId, D as toLabel } from "../mount.js";
import "js-cookie";
import "events";
import "http";
import "@medv/finder";
import "front-matter";
import "markdown-it";
import "markdown-it-anchor";
import "markdown-it-implicit-figures";
import "markdown-it-link-attributes";
import "markdown-it-video";
import "remove-markdown";
import "./index.b92a68c6.js";
import "body-parser";
import "path-browserify";
import "dotenv";
import "compression";
import "serve-favicon";
import "serve-static";
import "html-minifier";
import "vite";
import "@vue/server-renderer";
import "fs";
import "enquirer";
import "semver";
import "glob";
import "minimist";
import "handlebars";
import "execa";
import "multer";
import "sharp";
import "@vitejs/plugin-vue";
import _sfc_main$2 from "./ElModal.b8bf3ed3.js";
import _sfc_main$1 from "./ElButton.07214592.js";
import _sfc_main$3 from "./ElSpinner.1083576f.js";
import "express";
import "axios";
import "knex";
import "dompurify";
import "dayjs";
import "chalk";
import "dayjs/plugin/relativeTime.js";
import "dayjs/plugin/utc.js";
import "dayjs/plugin/timezone.js";
import "dayjs/plugin/updateLocale.js";
import "dayjs/plugin/weekOfYear.js";
import "deepmerge";
import "fast-safe-stringify";
import "spark-md5";
import "nanoid";
import "is-plain-object";
import "prettyoutput";
import "consola";
import "validator";
import "@vueuse/head";
import "node-fetch";
import "vue-router";
import "jsonwebtoken";
import "fs-extra";
import "bcrypt";
import "knex-stringcase";
import "@sinclair/typebox";
import "nodemailer";
import "nodemailer-html-to-text";
import "@tailwindcss/forms";
import "unocss/vite";
import "@unocss/preset-icons";
import "nodemon";
import "gravatar-url";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "InputMediaLibrary",
  __ssrInlineRender: true,
  props: {
    modelValue: { type: [String], default: "" },
    factorMedia: { type: Object, required: true }
  },
  emits: ["update:modelValue"],
  setup(__props, { emit }) {
    const props = __props;
    const uploadId = `file-upload-${objectId()}`;
    const draggingOver = vue.ref();
    const vis = vue.ref();
    const navItems = ["upload", "stockPhotos", "library"];
    const navItemActive = vue.ref(navItems[0]);
    const uploading = vue.ref(false);
    const handleEmit = (val = "") => {
      emit("update:modelValue", val);
    };
    const uploadFiles = async (files) => {
      var _a, _b;
      if (!files)
        return;
      uploading.value = true;
      const result = await props.factorMedia.uploadFiles({ files });
      if (((_a = result[0]) == null ? void 0 : _a.status) == "success") {
        handleEmit((_b = result[0].data) == null ? void 0 : _b.url);
      }
      uploading.value = false;
    };
    const handleUploadFile = async (ev) => {
      ev.stopPropagation();
      const target = ev.target;
      await uploadFiles(target.files);
    };
    const handleDropFile = async (ev) => {
      var _a;
      const event = ev;
      await uploadFiles((_a = event.dataTransfer) == null ? void 0 : _a.files);
    };
    return (_ctx, _push, _parent, _attrs) => {
      _push(`<div${ssrRenderAttrs(_attrs)}>`);
      _push(ssrRenderComponent(_sfc_main$1, {
        btn: "theme",
        loading: unref(uploading),
        onClick: ($event) => vis.value = true
      }, {
        default: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(`<div class="i-carbon-image text-theme-400 mr-2 text-lg"${_scopeId}></div><span${_scopeId}>Add Media</span>`);
          } else {
            return [
              createVNode("div", { class: "i-carbon-image text-theme-400 mr-2 text-lg" }),
              createVNode("span", null, "Add Media")
            ];
          }
        }),
        _: 1
      }, _parent));
      _push(ssrRenderComponent(_sfc_main$2, {
        vis: unref(vis),
        "onUpdate:vis": ($event) => isRef(vis) ? vis.value = $event : null,
        "modal-class": "max-w-xl"
      }, {
        default: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(`<div class="media-gallery grid grid-cols-12 py-2 px-4 text-sm"${_scopeId}><div class="nav col-span-12"${_scopeId}><div class="grid grid-cols-3 items-center justify-center text-xs"${_scopeId}><!--[-->`);
            ssrRenderList(navItems, (item, i) => {
              _push2(`<div class="${ssrRenderClass([
                item == unref(navItemActive) ? `text-theme-700 border-theme-400 font-semibold` : `text-slate-400 cursor-pointer border-slate-300 hover:text-slate-700`,
                "border-b-2 py-2 px-3 text-center"
              ])}"${_scopeId}>${ssrInterpolate(unref(toLabel)(item))}</div>`);
            });
            _push2(`<!--]--></div></div></div><div class="media-body p-4"${_scopeId}>`);
            if (unref(uploading)) {
              _push2(`<div class="p-12"${_scopeId}>`);
              _push2(ssrRenderComponent(_sfc_main$3, { class: "m-auto h-12 w-12 text-slate-200" }, null, _parent2, _scopeId));
              _push2(`</div>`);
            } else if (unref(navItemActive) == "upload") {
              _push2(`<label${ssrRenderAttr("for", uploadId)} class="${ssrRenderClass([[], "mt-1 flex cursor-pointer justify-center rounded-md border-2 border-dashed border-slate-200 px-6 pt-8 pb-10 hover:border-slate-300"])}"${_scopeId}><div class="space-y-1 text-center"${_scopeId}><div class="text-center"${_scopeId}><div class="i-carbon-upload inline-block text-3xl"${_scopeId}></div></div><div class="flex text-sm text-slate-500"${_scopeId}><div class="text-theme-700 hover:text-primary-400 relative cursor-pointer rounded-md bg-white font-medium"${_scopeId}><span${_scopeId}>Upload a file</span><input${ssrRenderAttr("id", uploadId)}${ssrRenderAttr("name", uploadId)} type="file" class="sr-only" accept="image/*" multiple${_scopeId}></div><p class="pl-1"${_scopeId}>or drag and drop</p></div><p class="text-xs text-slate-400"${_scopeId}>PNG, JPG, GIF up to 10MB</p></div></label>`);
            } else {
              _push2(`<div${_scopeId}>Library</div>`);
            }
            _push2(`</div>`);
          } else {
            return [
              createVNode("div", { class: "media-gallery grid grid-cols-12 py-2 px-4 text-sm" }, [
                createVNode("div", { class: "nav col-span-12" }, [
                  createVNode("div", { class: "grid grid-cols-3 items-center justify-center text-xs" }, [
                    (openBlock(), createBlock(Fragment, null, renderList(navItems, (item, i) => {
                      return createVNode("div", {
                        key: i,
                        class: [
                          "border-b-2 py-2 px-3 text-center",
                          item == unref(navItemActive) ? `text-theme-700 border-theme-400 font-semibold` : `text-slate-400 cursor-pointer border-slate-300 hover:text-slate-700`
                        ],
                        onClick: ($event) => navItemActive.value = item
                      }, toDisplayString(unref(toLabel)(item)), 11, ["onClick"]);
                    }), 64))
                  ])
                ])
              ]),
              createVNode("div", {
                class: "media-body p-4",
                onDragover: withModifiers(() => {
                }, ["prevent"]),
                onDrop: withModifiers(() => {
                }, ["prevent"]),
                onClick: withModifiers(() => {
                }, ["stop"])
              }, [
                unref(uploading) ? (openBlock(), createBlock("div", {
                  key: 0,
                  class: "p-12"
                }, [
                  createVNode(_sfc_main$3, { class: "m-auto h-12 w-12 text-slate-200" })
                ])) : unref(navItemActive) == "upload" ? (openBlock(), createBlock("label", {
                  key: 1,
                  for: uploadId,
                  class: ["mt-1 flex cursor-pointer justify-center rounded-md border-2 border-dashed border-slate-200 px-6 pt-8 pb-10 hover:border-slate-300", []],
                  onDrop: handleDropFile,
                  onDragover: ($event) => draggingOver.value = true,
                  onDragleave: ($event) => draggingOver.value = false
                }, [
                  createVNode("div", { class: "space-y-1 text-center" }, [
                    createVNode("div", { class: "text-center" }, [
                      createVNode("div", { class: "i-carbon-upload inline-block text-3xl" })
                    ]),
                    createVNode("div", { class: "flex text-sm text-slate-500" }, [
                      createVNode("div", { class: "text-theme-700 hover:text-primary-400 relative cursor-pointer rounded-md bg-white font-medium" }, [
                        createVNode("span", null, "Upload a file"),
                        createVNode("input", {
                          id: uploadId,
                          name: uploadId,
                          type: "file",
                          class: "sr-only",
                          accept: "image/*",
                          multiple: "",
                          onChange: handleUploadFile
                        }, null, 32)
                      ]),
                      createVNode("p", { class: "pl-1" }, "or drag and drop")
                    ]),
                    createVNode("p", { class: "text-xs text-slate-400" }, "PNG, JPG, GIF up to 10MB")
                  ])
                ], 40, ["onDragover", "onDragleave"])) : (openBlock(), createBlock("div", { key: 2 }, "Library"))
              ], 40, ["onDragover", "onDrop", "onClick"])
            ];
          }
        }),
        _: 1
      }, _parent));
      _push(`</div>`);
    };
  }
});
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("../ui/InputMediaLibrary.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
export {
  _sfc_main as default
};
