import { defineComponent, ref, watch, mergeProps, nextTick, useSSRContext } from "vue";
import { ssrRenderAttrs, ssrRenderClass, ssrRenderStyle, ssrInterpolate } from "vue/server-renderer";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "TextBox",
  __ssrInlineRender: true,
  props: {
    status: {},
    component_id: {},
    data: {}
  },
  setup(__props) {
    const props = __props;
    const mainContent = ref(null);
    const isCollapsed = ref(true);
    const showToggle = ref(false);
    const checkHeight = async () => {
      if (!props.data.settings.collapsible) {
        isCollapsed.value = false;
        showToggle.value = false;
        return;
      }
      await nextTick();
      if (!mainContent.value) return;
      const height = mainContent.value.scrollHeight;
      showToggle.value = height > 200;
    };
    watch(
      () => props.data.content,
      () => checkHeight(),
      { immediate: true }
    );
    watch(
      () => props.data.settings.collapsible,
      () => checkHeight(),
      { immediate: true }
    );
    return (_ctx, _push, _parent, _attrs) => {
      var _a, _b;
      _push(`<div${ssrRenderAttrs(mergeProps({
        id: "component-" + _ctx.component_id,
        class: { container: true, readonly: _ctx.status == "dev" },
        style: "margin-top:" + ((_a = _ctx.data.style) == null ? void 0 : _a.margin.top) + "px; margin-bottom:" + (((_b = _ctx.data.style) == null ? void 0 : _b.margin.bottom) ?? 20) + "px;"
      }, _attrs))} data-v-bf9e00a4><div class="row" data-v-bf9e00a4><div class="col-12" data-v-bf9e00a4><div class="${ssrRenderClass({ "w-100 d-block": true, "card px-4 py-2": _ctx.data.settings.background })}" data-v-bf9e00a4><div class="main-content main-content-text-box" style="${ssrRenderStyle(isCollapsed.value && showToggle.value ? "max-height:200px; overflow:hidden;" : "")}" data-v-bf9e00a4>${_ctx.data.content ?? ""}</div>`);
      if (showToggle.value && _ctx.data.settings.collapsible) {
        _push(`<div class="mt-2 mb-2" data-v-bf9e00a4><button class="btn link fw-bold d-flex align-items-center gap-1 fs-6 ps-0" data-v-bf9e00a4><span data-v-bf9e00a4>${ssrInterpolate(isCollapsed.value ? _ctx.$t("messages.word.more") : _ctx.$t("messages.word.less"))}</span><i class="${ssrRenderClass(isCollapsed.value ? "ri-arrow-down-s-line" : "ri-arrow-up-s-line")}" data-v-bf9e00a4></i></button></div>`);
      } else {
        _push(`<!---->`);
      }
      _push(`</div></div></div></div>`);
    };
  }
});
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("resources/js/Components/Main/UI/Widgets/TextBox.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
const TextBox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bf9e00a4"]]);
export {
  TextBox as default
};
