import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { UiIcon } from '@/components/UiIcon';
import UiSidebar from './UiSidebar.vue';
import UiSidebarContent from './UiSidebarContent.vue';
import UiSidebarHeader from './UiSidebarHeader.vue';
import UiSidebarMenu from './UiSidebarMenu.vue';
import UiSidebarMenuItem from './UiSidebarMenuItem.vue';
import UiSidebarPopoverTrigger from './UiSidebarPopoverTrigger.vue';
import UiSidebarProvider from './UiSidebarProvider.vue';

const meta: Meta<typeof UiSidebarPopoverTrigger> = {
  title: 'Patterns/UiSidebar/UiSidebarPopoverTrigger',
  component: UiSidebarPopoverTrigger,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
    docs: {
      description: {
        component:
          'Sidebar-styled control used inside `UiPopover` / `UiSidebarPopover` as the trigger: **`label`**, optional **`tooltip`**, **`icon`** slot, and **`end-icon`** slot (e.g. chevron). Pairs with `SidebarMenuButton` for collapsed tooltips.',
      },
    },
  },
  argTypes: {
    label: {
      control: 'text',
      description: 'Visible title next to the icon.',
    },
    tooltip: {
      control: 'text',
      description:
        'Tooltip string forwarded to the menu button when collapsed.',
    },
    isActive: {
      control: 'boolean',
      description: 'Active rail/background for the trigger row.',
    },
  },
};

export default meta;

type Story = StoryObj<typeof UiSidebarPopoverTrigger>;

export const Default: Story = {
  render: () => ({
    components: {
      UiIcon,
      UiSidebar,
      UiSidebarContent,
      UiSidebarHeader,
      UiSidebarMenu,
      UiSidebarMenuItem,
      UiSidebarPopoverTrigger,
      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">
              <UiSidebarMenu>
                <UiSidebarMenuItem>
                  <UiSidebarPopoverTrigger label="Acme Inc" tooltip="Switch team">
                    <template #icon>
                      <div
                        class="flex size-5 items-center justify-center rounded-md border border-border-surface-default bg-background-surface-primary text-content-on-surface-primary"
                      >
                        <UiIcon name="building-2" size="s" />
                      </div>
                    </template>
                  </UiSidebarPopoverTrigger>
                </UiSidebarMenuItem>
              </UiSidebarMenu>
            </UiSidebarContent>
          </UiSidebar>
        </UiSidebarProvider>
      </div>
    `,
  }),
};
