import type { Meta, StoryObj } from '@storybook/vue3-vite';
import UiSidebar from './UiSidebar.vue';
import UiSidebarContent from './UiSidebarContent.vue';
import UiSidebarGroup from './UiSidebarGroup.vue';
import UiSidebarGroupContent from './UiSidebarGroupContent.vue';
import UiSidebarGroupLabel from './UiSidebarGroupLabel.vue';
import UiSidebarHeader from './UiSidebarHeader.vue';
import UiSidebarMenuSubItem from './UiSidebarMenuSubItem.vue';
import UiSidebarProvider from './UiSidebarProvider.vue';
import UiSidebarSub from './UiSidebarSub.vue';

const meta: Meta<typeof UiSidebarSub> = {
  title: 'Patterns/UiSidebar/UiSidebarSub',
  component: UiSidebarSub,
  tags: ['autodocs'],
  args: {
    variant: 'default',
  },
  parameters: {
    layout: 'padded',
    docs: {
      description: {
        component:
          'Subgroup container for `UiSidebarMenuSubItem` rows. **`border`** adds a left rail and outer margins; **`default`** uses horizontal padding only; **`indent`** adds extra horizontal inset (`calc(1.5rem + 6px)`). Place inside `UiSidebarGroupContent` (or equivalent) within a sidebar tree.',
      },
    },
  },
  argTypes: {
    variant: {
      control: 'select',
      options: ['border', 'default', 'indent'],
      description:
        '`border` — left rule + rail margins; `default` — `px-6`; `indent` — extra 6px per side beyond default.',
    },
  },
};

export default meta;

type Story = StoryObj<typeof UiSidebarSub>;

export const Variants: Story = {
  render: () => ({
    components: {
      UiSidebar,
      UiSidebarContent,
      UiSidebarGroup,
      UiSidebarGroupContent,
      UiSidebarGroupLabel,
      UiSidebarHeader,
      UiSidebarMenuSubItem,
      UiSidebarProvider,
      UiSidebarSub,
    },
    template: `
      <div class="bg-background-surface-primary p-4">
        <UiSidebarProvider :default-open="true">
          <UiSidebar collapsible="icon" class="w-80">
            <UiSidebarHeader tooltip="Toggle sidebar">Preview</UiSidebarHeader>
            <UiSidebarContent class="p-2">
              <UiSidebarGroup :default-open="true">
                <UiSidebarGroupLabel :show-action="false" :show-collapse="false">
                  variant=&quot;border&quot;
                </UiSidebarGroupLabel>
                <UiSidebarGroupContent>
                  <UiSidebarSub variant="border">
                    <UiSidebarMenuSubItem>Alpha</UiSidebarMenuSubItem>
                    <UiSidebarMenuSubItem is-active>Beta</UiSidebarMenuSubItem>
                  </UiSidebarSub>
                </UiSidebarGroupContent>
              </UiSidebarGroup>
              <UiSidebarGroup :default-open="true">
                <UiSidebarGroupLabel :show-action="false" :show-collapse="false">
                  variant=&quot;default&quot;
                </UiSidebarGroupLabel>
                <UiSidebarGroupContent>
                  <UiSidebarSub variant="default">
                    <UiSidebarMenuSubItem>Alpha</UiSidebarMenuSubItem>
                    <UiSidebarMenuSubItem>Beta</UiSidebarMenuSubItem>
                  </UiSidebarSub>
                </UiSidebarGroupContent>
              </UiSidebarGroup>
              <UiSidebarGroup :default-open="true">
                <UiSidebarGroupLabel :show-action="false" :show-collapse="false">
                  variant=&quot;indent&quot;
                </UiSidebarGroupLabel>
                <UiSidebarGroupContent>
                  <UiSidebarSub variant="indent">
                    <UiSidebarMenuSubItem>Alpha</UiSidebarMenuSubItem>
                    <UiSidebarMenuSubItem>Beta</UiSidebarMenuSubItem>
                  </UiSidebarSub>
                </UiSidebarGroupContent>
              </UiSidebarGroup>
            </UiSidebarContent>
          </UiSidebar>
        </UiSidebarProvider>
      </div>
    `,
  }),
};
