import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { UiIcon } from '@/components/UiIcon';
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 UiSidebarMenu from './UiSidebarMenu.vue';
import UiSidebarMenuButton from './UiSidebarMenuButton.vue';
import UiSidebarMenuItem from './UiSidebarMenuItem.vue';
import UiSidebarProvider from './UiSidebarProvider.vue';

const meta: Meta<typeof UiSidebarGroup> = {
  title: 'Patterns/UiSidebar/UiSidebarGroup',
  component: UiSidebarGroup,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
    docs: {
      description: {
        component:
          'Collapsible section wrapper: provides group context to `UiSidebarGroupLabel` / `UiSidebarGroupContent`, applies pattern padding (`!p-2`) on the core group, and forwards attributes to the primitive.',
      },
    },
  },
  argTypes: {
    defaultOpen: {
      control: 'boolean',
      description:
        'Initial open state; when `false`, `UiSidebarGroupContent` is hidden until the label toggles the group.',
    },
  },
};

export default meta;

type Story = StoryObj<typeof UiSidebarGroup>;

const renderStory = (defaultOpen = true) => ({
  components: {
    UiIcon,
    UiSidebar,
    UiSidebarContent,
    UiSidebarGroup,
    UiSidebarGroupContent,
    UiSidebarGroupLabel,
    UiSidebarHeader,
    UiSidebarMenu,
    UiSidebarMenuButton,
    UiSidebarMenuItem,
    UiSidebarProvider,
  },
  setup() {
    const items = [
      { title: 'Playground', icon: 'bot' },
      { title: 'Projects', icon: 'folder' },
      { title: 'New item', icon: 'plus' },
    ];

    return { defaultOpen, items };
  },
  template: `
    <UiSidebarProvider :default-open="true">
      <div class="bg-background-surface-primary p-4">
        <div class="w-80">
          <UiSidebar collapsible="icon">
            <UiSidebarHeader tooltip="Toggle sidebar">Preview</UiSidebarHeader>
            <UiSidebarContent class="p-0">
              <UiSidebarGroup :default-open="defaultOpen">
                <UiSidebarGroupLabel
                  collapse-tooltip="Collapse group"
                  action-tooltip="Add item"
                >
                  Group title
                </UiSidebarGroupLabel>

                <UiSidebarGroupContent>
                  <UiSidebarMenu class="mt-2">
                    <UiSidebarMenuItem v-for="item in items" :key="item.title">
                      <UiSidebarMenuButton :tooltip="item.title">
                        <template #start-icon>
                          <UiIcon :name="item.icon" size="s" />
                        </template>
                        {{ item.title }}
                      </UiSidebarMenuButton>
                    </UiSidebarMenuItem>
                  </UiSidebarMenu>
                </UiSidebarGroupContent>
              </UiSidebarGroup>
            </UiSidebarContent>
          </UiSidebar>
        </div>
      </div>
    </UiSidebarProvider>
  `,
});

export const Default: Story = {
  render: () => renderStory(true),
};

export const CollapsedByDefault: Story = {
  render: () => renderStory(false),
};
