import { defineComponent, ref, onMounted, useSlots, watch, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, createCommentVNode, unref, createElementVNode, renderSlot, toDisplayString, createVNode, withDirectives, vShow } from 'vue';
import { api } from 'vue-fullscreen';
import { MeIconButton } from '../../icon-button/index.mjs';

"use strict";
const _hoisted_1 = { style: { "display": "flex", "width": "fit-content", "flex": "1", "align-items": "center" } };
const _hoisted_2 = { style: { "display": "flex", "align-items": "center", "cursor": "pointer" } };
const _hoisted_3 = {
  class: "card-text",
  style: { height: "100%" }
};
const __default__ = defineComponent({
  name: "me-card"
});
var script = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    title: { type: String, required: false },
    headerBorder: { type: Boolean, required: false, default: true },
    footerBorder: { type: Boolean, required: false, default: true },
    border: { type: Boolean, required: false, default: true },
    titleSize: { type: String, required: false, default: "16px" },
    bgColor: { type: String, required: false },
    width: { type: String, required: false },
    height: { type: String, required: false },
    bodyHeight: { type: String, required: false },
    bodyStyle: { type: null, required: false },
    mode: { type: String, required: false, default: "normal" },
    round: { type: Boolean, required: false, default: true },
    customStyle: { type: null, required: false },
    fullscreen: { type: Boolean, required: false, default: false },
    showCollapse: { type: Boolean, required: false, default: true },
    shadow: { type: String, required: false, default: "never" },
    headerStyle: { type: Object, required: false },
    expand: { type: Boolean, required: false, default: true }
  },
  emits: ["closeEvent", "changeEvent"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const bodyRef = ref();
    const bodyMinWidth = ref(0);
    onMounted(() => {
      bodyMinWidth.value = bodyRef.value?.getBoundingClientRect()?.width;
    });
    const emit = __emit;
    const slot = useSlots();
    const bodyHeight = ref(props.bodyHeight);
    const showBody = ref(props.expand);
    watch(
      () => props.expand,
      (newValue) => {
        showBody.value = newValue;
      }
    );
    const headerBorder = computed(() => {
      return {
        "border-bottom": props.headerBorder ? "var(--card-border-width) solid var(--card-border-color)" : "0"
      };
    });
    const footerBorder = computed(() => {
      return {
        "border-top": props.footerBorder ? "var(--card-border-width) solid var(--card-border-color)" : "0"
      };
    });
    const getStyle = computed(() => {
      return {
        border: props.border ? "var(--card-border-width) solid var(--card-border-color)" : "0",
        height: props.mode === "full" ? "100%" : props.height,
        borderRadius: props.round ? "calc(4px - (1px))" : "0",
        backgroundColor: props.bgColor,
        ...props.customStyle
      };
    });
    const fullscreenVal = ref(false);
    const meCardRef = ref(null);
    const zIndex = ref(0);
    const fullScreenIcon = ref("ri-expand-diagonal-line");
    const fullScreenStyle = ref({
      width: "",
      margin: "",
      height: props.height
    });
    window.addEventListener("resize", () => {
      if (!fullscreenVal.value) {
        bodyMinWidth.value = bodyRef.value?.getBoundingClientRect()?.width;
      }
    });
    const toggle = async () => {
      api.toggle(meCardRef.value, {
        teleport: true,
        pageOnly: true,
        callback: (isFullscreen) => {
          fullscreenVal.value = isFullscreen;
          console.log(isFullscreen, "isFullscreen");
          emit("changeEvent", isFullscreen);
          if (isFullscreen) {
            zIndex.value = 1e3;
            fullScreenStyle.value = {
              width: "100vw",
              margin: "0",
              height: "100vh"
            };
            fullScreenIcon.value = "ri-collapse-diagonal-line";
            bodyHeight.value = "100%";
          } else {
            zIndex.value = 0;
            fullScreenStyle.value = {
              width: "",
              margin: "",
              height: "100%"
            };
            fullScreenIcon.value = "ri-expand-diagonal-line";
            bodyHeight.value = props.bodyHeight;
          }
        }
      });
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(["me-card", {
            "is-hover-shadow": props.shadow == "hover",
            "is-always-shadow": props.shadow == "always"
          }]),
          ref_key: "meCardRef",
          ref: meCardRef,
          style: normalizeStyle({ ...getStyle.value, zIndex: zIndex.value, ...fullScreenStyle.value })
        },
        [
          createCommentVNode(" header "),
          unref(slot)?.header || unref(slot)["header-left-btn"] || unref(slot)["header-right-btn"] || __props.title ? (openBlock(), createElementBlock(
            "div",
            {
              key: 0,
              class: "card-header",
              style: normalizeStyle({ ...headerBorder.value, ...__props.headerStyle })
            },
            [
              createElementVNode("div", _hoisted_1, [
                renderSlot(_ctx.$slots, "header"),
                createElementVNode("div", null, [
                  renderSlot(_ctx.$slots, "header-left-btn", {}, () => [
                    createElementVNode(
                      "div",
                      {
                        class: "card-title",
                        style: normalizeStyle({ fontSize: __props.titleSize })
                      },
                      toDisplayString(__props.title),
                      5
                      /* TEXT, STYLE */
                    )
                  ])
                ])
              ]),
              createElementVNode("div", _hoisted_2, [
                renderSlot(_ctx.$slots, "header-right-btn"),
                props.showCollapse ? (openBlock(), createElementBlock("div", {
                  key: 0,
                  onClick: _cache[0] || (_cache[0] = ($event) => showBody.value = !showBody.value),
                  style: { "margin-left": "10px" }
                }, [
                  createVNode(unref(MeIconButton), {
                    hover: "",
                    icon: showBody.value ? "ri-subtract-line" : "ri-add-line"
                  }, null, 8, ["icon"])
                ])) : createCommentVNode("v-if", true),
                props.fullscreen ? (openBlock(), createElementBlock("div", {
                  key: 1,
                  onClick: toggle,
                  style: { "margin-left": "10px" }
                }, [
                  createVNode(unref(MeIconButton), {
                    hover: "",
                    icon: fullScreenIcon.value
                  }, null, 8, ["icon"])
                ])) : createCommentVNode("v-if", true)
              ])
            ],
            4
            /* STYLE */
          )) : createCommentVNode("v-if", true),
          createCommentVNode(" body "),
          withDirectives(createElementVNode(
            "div",
            {
              ref_key: "bodyRef",
              ref: bodyRef,
              style: normalizeStyle([{ "overflow-y": "auto", "padding": "10px 0" }, { height: bodyHeight.value, ...__props.bodyStyle }])
            },
            [
              withDirectives(createElementVNode(
                "div",
                {
                  class: "card-body",
                  style: normalizeStyle({
                    height: !fullscreenVal.value ? `calc(${props.bodyHeight} - 20px)` : "100%",
                    ...__props.bodyStyle
                  })
                },
                [
                  createElementVNode("div", _hoisted_3, [
                    renderSlot(_ctx.$slots, "default")
                  ])
                ],
                4
                /* STYLE */
              ), [
                [vShow, true]
              ])
            ],
            4
            /* STYLE */
          ), [
            [vShow, showBody.value]
          ]),
          createCommentVNode(" footer "),
          unref(slot)?.footer && showBody.value ? (openBlock(), createElementBlock(
            "div",
            {
              key: 1,
              style: normalizeStyle(footerBorder.value),
              class: "card-footer"
            },
            [
              renderSlot(_ctx.$slots, "footer")
            ],
            4
            /* STYLE */
          )) : createCommentVNode("v-if", true)
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});

export { script as default };
//# sourceMappingURL=card.vue2.mjs.map
