<script>
import theme from "#build/b24ui/dashboard-panel";
</script>

<script setup>
import { computed, useId, toRef } from "vue";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { useResizable } from "../composables/useResizable";
import { useDashboard } from "../utils/dashboard";
import { tv } from "../utils/tv";
import B24DashboardResizeHandle from "./DashboardResizeHandle.vue";
defineOptions({ inheritAttrs: false });
const _props = defineProps({
  class: { type: null, required: false },
  b24ui: { type: Object, required: false },
  id: { type: String, required: false },
  minSize: { type: Number, required: false, default: 200 },
  maxSize: { type: Number, required: false },
  defaultSize: { type: Number, required: false },
  resizable: { type: Boolean, required: false, default: false }
});
defineSlots();
const props = useComponentProps("dashboardPanel", _props);
const appConfig = useAppConfig();
const dashboardContext = useDashboard({ storageKey: "dashboard", unit: "px" });
const id = `${dashboardContext.storageKey}-panel-${props.id || useId()}`;
const { el, size, isDragging, onMouseDown, onTouchStart, onDoubleClick } = useResizable(id, toRef(() => ({ ...dashboardContext, ...props })));
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardPanel || {} })({
  size: !!size.value
}));
</script>

<template>
  <div
    :id="id"
    ref="el"
    v-bind="$attrs"
    :data-dragging="isDragging"
    data-slot="root"
    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
    :style="[size ? { '--width': `${size}${dashboardContext.unit}` } : void 0]"
  >
    <slot>
      <slot name="header" />

      <div data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
        <slot name="body" />
      </div>

      <slot name="footer" />
    </slot>
  </div>

  <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart" :on-double-click="onDoubleClick">
    <B24DashboardResizeHandle
      v-if="props.resizable"
      :aria-controls="id"
      data-slot="handle"
      :class="b24ui.handle({ class: props.b24ui?.handle })"
      @mousedown="onMouseDown"
      @touchstart="onTouchStart"
      @dblclick="onDoubleClick"
    />
  </slot>
</template>
