<script setup lang="ts">
import { computed } from 'vue';
import { Sidebar } from '@/components/core/sidebar';
import type { UiSidebarProps } from './types';

defineOptions({
  name: 'UiSidebar',
  inheritAttrs: false,
});

const props = withDefaults(defineProps<UiSidebarProps>(), {
  side: 'left',
  variant: 'sidebar',
  collapsible: 'offcanvas',
  resizable: false,
});

const resizeOptions = computed(() => {
  const isResizable = props.resizeOptions !== undefined || props.resizable;
  if (!isResizable) return undefined;

  return {
    defaultWidth: props.resizeOptions?.defaultWidth ?? props.defaultWidth,
    minWidth: props.resizeOptions?.minWidth ?? props.minWidth,
    maxWidth: props.resizeOptions?.maxWidth ?? props.maxWidth,
    widthStorageKey:
      props.resizeOptions?.widthStorageKey ?? props.widthStorageKey,
    resizeAriaLabel:
      props.resizeOptions?.resizeAriaLabel ?? props.resizeAriaLabel,
    keyboardResizeBy:
      props.resizeOptions?.keyboardResizeBy ?? props.keyboardResizeBy,
  };
});
</script>

<template>
  <Sidebar
    :side="props.side"
    :variant="props.variant"
    :collapsible="props.collapsible"
    :resize-options="resizeOptions"
    v-bind="$attrs"
  >
    <slot />
  </Sidebar>
</template>
