<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { SidebarMenuSub } from '@/components/core/sidebar';
import { cn, omitClass } from '@/lib/utils';
import type { UiSidebarSubProps } from './types';

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

const props = withDefaults(defineProps<UiSidebarSubProps>(), {
  variant: 'default',
});

const attrs = useAttrs();

const listReset = '!mx-0 !w-full !min-w-0 !translate-x-0 !border-l-0';

/**
 * Vertical rail: `border-border-input-default`, horizontal margin on the rail via spacing scale; list has no `pl-*`.
 */
const borderRailClass =
  'ml-4 mr-2 shrink-0 self-stretch w-0 border-l border-solid border-border-input-default';

const borderShellClass = computed(() =>
  cn(
    'ui-sidebar-sub group-data-[collapsible=icon]:hidden flex min-w-0 w-full items-stretch',
    attrs.class as string | undefined,
  ),
);

const borderListClass = computed(() =>
  cn(listReset, 'flex flex-1 min-w-0 flex-col gap-1 pl-0 py-2 pr-6'),
);

const rootClass = computed(() =>
  cn(
    'ui-sidebar-sub',
    listReset,
    'flex flex-col gap-1',
    // Default: `px-6`; indent adds 6px per side (same as former `calc(1.5rem+6px)`).
    props.variant === 'default' && 'px-6 !py-0',
    props.variant === 'indent' && 'px-[calc(1.5rem+6px)] !py-0',
    attrs.class as string | undefined,
  ),
);

const passthroughAttrs = computed(() =>
  omitClass(attrs as Record<string, unknown>),
);
</script>

<template>
  <div v-if="props.variant === 'border'" :class="borderShellClass">
    <div aria-hidden="true" :class="borderRailClass" />
    <SidebarMenuSub v-bind="passthroughAttrs" :class="borderListClass">
      <slot />
    </SidebarMenuSub>
  </div>
  <SidebarMenuSub v-else v-bind="passthroughAttrs" :class="rootClass">
    <slot />
  </SidebarMenuSub>
</template>
