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 UiSidebarMenuSub from './UiSidebarMenuSub.vue';
import UiSidebarMenuSubItem from './UiSidebarMenuSubItem.vue';
import UiSidebarProvider from './UiSidebarProvider.vue';

const meta: Meta<typeof UiSidebarMenuSubItem> = {
  title: 'Patterns/UiSidebar/UiSidebarMenuSubItem',
  component: UiSidebarMenuSubItem,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
    docs: {
      description: {
        component:
          'Sub-menu row with overlay hover/active styling aligned to `UiSidebarMenuButton`. Wrap label text in the default slot; supports `isActive` and reka-ui `Primitive` props (`as`, `asChild`).',
      },
    },
  },
  argTypes: {
    isActive: {
      control: 'boolean',
      description: 'Shows active indicator and accent state.',
    },
    as: {
      control: 'text',
      description: 'Root element tag (reka-ui Primitive), default `button`.',
    },
    asChild: {
      control: 'boolean',
      description:
        'Merge props onto the child element instead of rendering the default root.',
    },
  },
};

export default meta;

type Story = StoryObj<typeof UiSidebarMenuSubItem>;

export const Default: Story = {
  render: () => ({
    components: {
      UiSidebar,
      UiSidebarContent,
      UiSidebarGroup,
      UiSidebarGroupContent,
      UiSidebarGroupLabel,
      UiSidebarHeader,
      UiSidebarMenuSub,
      UiSidebarMenuSubItem,
      UiSidebarProvider,
    },
    template: `
      <div class="bg-background-surface-primary p-4">
        <UiSidebarProvider :default-open="true">
          <UiSidebar collapsible="icon" class="w-72">
            <UiSidebarHeader tooltip="Toggle sidebar">Preview</UiSidebarHeader>
            <UiSidebarContent class="p-2">
              <UiSidebarGroup :default-open="true">
                <UiSidebarGroupLabel
                  size="xs"
                  collapse-tooltip="Toggle section"
                  :show-action="false"
                >
                  Section
                </UiSidebarGroupLabel>
                <UiSidebarGroupContent>
                  <UiSidebarMenuSub mode="default">
                    <UiSidebarMenuSubItem>Overview</UiSidebarMenuSubItem>
                    <UiSidebarMenuSubItem>Usage</UiSidebarMenuSubItem>
                    <UiSidebarMenuSubItem is-active>Settings</UiSidebarMenuSubItem>
                  </UiSidebarMenuSub>
                </UiSidebarGroupContent>
              </UiSidebarGroup>
            </UiSidebarContent>
          </UiSidebar>
        </UiSidebarProvider>
      </div>
    `,
  }),
};
