import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { UiIcon } from '@/components/UiIcon';
import UiSidebarPopoverMenu from './UiSidebarPopoverMenu.vue';
import UiSidebarPopoverMenuItem from './UiSidebarPopoverMenuItem.vue';

const meta: Meta<typeof UiSidebarPopoverMenu> = {
  title: 'Patterns/UiSidebar/UiSidebarPopoverMenu',
  component: UiSidebarPopoverMenu,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
    docs: {
      description: {
        component:
          'Floating menu panel: optional **`label`** header, default slot for `UiSidebarPopoverMenuItem` rows, and optional **`footer`** slot. **`showFooterSeparator`** draws a top border above the footer when true.',
      },
    },
  },
  argTypes: {
    label: {
      control: 'text',
      description: 'Muted section title above the item list.',
    },
    showFooterSeparator: {
      control: 'boolean',
      description:
        'When true, separator line between main items and footer slot.',
    },
  },
};

export default meta;

type Story = StoryObj<typeof UiSidebarPopoverMenu>;

export const Default: Story = {
  render: () => ({
    components: {
      UiIcon,
      UiSidebarPopoverMenu,
      UiSidebarPopoverMenuItem,
    },
    template: `
      <div class="w-[22rem] rounded-lg border border-border-surface-default bg-background-surface-floating shadow-xs">
        <UiSidebarPopoverMenu label="Teams">
          <div class="gap-y-1">
            <UiSidebarPopoverMenuItem label="Acme Inc" is-active shortcut="⌘1">
              <template #icon>
                <UiIcon name="command" size="s" />
              </template>
            </UiSidebarPopoverMenuItem>

            <UiSidebarPopoverMenuItem label="Beta Labs" shortcut="⌘2">
              <template #icon>
                <UiIcon name="audio-waveform" size="s" />
              </template>
            </UiSidebarPopoverMenuItem>
          </div>

          <template #footer>
            <UiSidebarPopoverMenuItem label="Create team">
              <template #icon>
                <UiIcon name="plus" size="s" />
              </template>
            </UiSidebarPopoverMenuItem>
          </template>
        </UiSidebarPopoverMenu>
      </div>
    `,
  }),
};
