import { defineComponent, ref, watch, openBlock, createElementBlock, unref, createElementVNode, createVNode, toDisplayString, Fragment, renderSlot, createCommentVNode, createBlock, createSlots, withCtx } from "vue";
import { isMobile } from "../../utils/environment.mjs";
import SvgIcon from "../common/base/SvgIcon.vue.mjs";
import Dialog from "../common/base/Dialog/index.mjs";
import ArrowStrokeBackIcon from "../common/icons/ArrowStrokeBackIcon.vue.mjs";
const _hoisted_1 = {
  key: 0,
  class: "panel-container h5"
};
const _hoisted_2 = { class: "container-header" };
const _hoisted_3 = { class: "container-header-title" };
const _hoisted_4 = { class: "container-content" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "PanelContainer",
  props: {
    visible: { type: Boolean },
    title: {},
    editButtonText: { type: [Boolean, String] },
    width: {}
  },
  emits: ["input", "edit"],
  setup(__props, { emit: __emit }) {
    const emit = __emit;
    const props = __props;
    const panelVisible = ref(false);
    const closePanel = () => {
      emit("input", false);
    };
    watch(
      () => props.visible,
      (val) => {
        panelVisible.value = val;
      },
      {
        immediate: true
      }
    );
    watch(
      panelVisible,
      (val) => {
        emit("input", val);
      },
      { immediate: true }
    );
    const handleEdit = () => emit("edit");
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", null, [
        panelVisible.value && unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_1, [
          createElementVNode("div", _hoisted_2, [
            createVNode(SvgIcon, {
              class: "container-header-back",
              icon: ArrowStrokeBackIcon,
              onClick: closePanel
            }),
            createElementVNode("span", _hoisted_3, toDisplayString(props.title), 1),
            !_ctx.$slots.edit ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
              renderSlot(_ctx.$slots, "edit", {}, void 0, true),
              createElementVNode("span", {
                class: "container-header-edit",
                onClick: handleEdit
              }, toDisplayString(props.editButtonText || ""), 1)
            ], 64)) : createCommentVNode("", true)
          ]),
          createElementVNode("div", _hoisted_4, [
            renderSlot(_ctx.$slots, "default", {}, void 0, true)
          ]),
          renderSlot(_ctx.$slots, "footer", {}, void 0, true)
        ])) : createCommentVNode("", true),
        !unref(isMobile) ? (openBlock(), createBlock(unref(Dialog), {
          key: 1,
          modelValue: panelVisible.value,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => panelVisible.value = $event),
          title: _ctx.title,
          modal: true,
          "append-to-body": true,
          width: _ctx.width
        }, createSlots({
          default: withCtx(() => [
            renderSlot(_ctx.$slots, "default", {}, void 0, true)
          ]),
          _: 2
        }, [
          _ctx.$slots.footer ? {
            name: "footer",
            fn: withCtx(() => [
              renderSlot(_ctx.$slots, "footer", {}, void 0, true)
            ]),
            key: "0"
          } : void 0
        ]), 1032, ["modelValue", "title", "width"])) : createCommentVNode("", true)
      ]);
    };
  }
});
export {
  _sfc_main as default
};
