import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { computed, ref, watch } from 'vue';
import {
  UiDropdownMenu,
  UiDropdownMenuTrigger,
  UiDropdownMenuContent,
  UiDropdownMenuItem,
  UiDropdownMenuSeparator,
  UiDropdownMenuLabel,
  UiDropdownMenuGroup,
  UiDropdownMenuShortcut,
  UiDropdownMenuCheckboxItem,
  UiDropdownMenuRadioGroup,
  UiDropdownMenuRadioItem,
  UiDropdownMenuSub,
  UiDropdownMenuSubTrigger,
  UiDropdownMenuSubContent,
} from './index';
import UiButton from '../UiButton/UiButton.vue';
import UiToggle from '../UiToggle/UiToggle.vue';
import { UiIcon } from '../UiIcon';
import { UiAvatar, UiAvatarFallback, UiAvatarImage } from '../UiAvatar';

/**
 * UiDropdownMenu is a floating menu of actions or settings anchored to a trigger element, with support for submenus, checkboxes, and radio groups.
 * Use it for action menus on tables, cards, and toolbars; for top-level site navigation, prefer `UiNavigationMenu`.
 */
const meta: Meta<typeof UiDropdownMenu> = {
  title: 'Components/UiDropdownMenu',
  component: UiDropdownMenu,
  tags: ['autodocs'],
  argTypes: {
    open: {
      control: 'boolean',
      description: 'Controlled open state (use with v-model:open)',
    },
    modal: {
      control: 'boolean',
      description:
        'Whether the menu is modal (blocks interaction with outside elements)',
    },
  },
  args: {
    open: false,
    modal: true,
  },
};

export default meta;

type Story = StoryObj<typeof UiDropdownMenu>;

const defaultTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiDropdownMenu,
  UiDropdownMenuTrigger,
  UiDropdownMenuContent,
  UiDropdownMenuItem,
  UiDropdownMenuSeparator,
  UiButton,
} from '@aleph-alpha/ui-library'

const open = ref(false)
</script>

<template>
  <UiDropdownMenu v-model:open="open">
    <UiDropdownMenuTrigger as-child>
      <UiButton variant="outline">Open Menu</UiButton>
    </UiDropdownMenuTrigger>
    <UiDropdownMenuContent>
      <UiDropdownMenuItem>Profile</UiDropdownMenuItem>
      <UiDropdownMenuItem>Settings</UiDropdownMenuItem>
      <UiDropdownMenuSeparator />
      <UiDropdownMenuItem>Team</UiDropdownMenuItem>
      <UiDropdownMenuItem>Billing</UiDropdownMenuItem>
      <UiDropdownMenuSeparator />
      <UiDropdownMenuItem>Sign Out</UiDropdownMenuItem>
    </UiDropdownMenuContent>
  </UiDropdownMenu>
</template>`;

/**
 * Basic dropdown menu with simple text items.
 */
export const Default: Story = {
  render: (args) => ({
    components: {
      UiDropdownMenu,
      UiDropdownMenuTrigger,
      UiDropdownMenuContent,
      UiDropdownMenuItem,
      UiDropdownMenuSeparator,
      UiButton,
    },
    setup() {
      const open = ref(args.open);
      const modal = ref(args.modal);
      watch(
        () => args.open,
        (v) => {
          open.value = v;
        },
      );
      watch(
        () => args.modal,
        (v) => {
          modal.value = v;
        },
      );
      return { open, modal };
    },
    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
      <UiDropdownMenuTrigger as-child>
        <UiButton variant="outline">Open Menu</UiButton>
      </UiDropdownMenuTrigger>
      <UiDropdownMenuContent>
        <UiDropdownMenuItem>Profile</UiDropdownMenuItem>
        <UiDropdownMenuItem>Settings</UiDropdownMenuItem>
        <UiDropdownMenuSeparator />
        <UiDropdownMenuItem>Team</UiDropdownMenuItem>
        <UiDropdownMenuItem>Billing</UiDropdownMenuItem>
        <UiDropdownMenuSeparator />
        <UiDropdownMenuItem>Sign Out</UiDropdownMenuItem>
      </UiDropdownMenuContent>
    </UiDropdownMenu>`,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

const withLabelsTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiDropdownMenu,
  UiDropdownMenuTrigger,
  UiDropdownMenuContent,
  UiDropdownMenuItem,
  UiDropdownMenuSeparator,
  UiDropdownMenuLabel,
  UiDropdownMenuGroup,
  UiDropdownMenuShortcut,
  UiDropdownMenuSub,
  UiDropdownMenuSubTrigger,
  UiDropdownMenuSubContent,
  UiButton,
} from '@aleph-alpha/ui-library'

const open = ref(false)
</script>

<template>
  <UiDropdownMenu v-model:open="open">
    <UiDropdownMenuTrigger as-child>
      <UiButton variant="outline">Open</UiButton>
    </UiDropdownMenuTrigger>
    <UiDropdownMenuContent class="w-56" align="start">
      <UiDropdownMenuLabel>My Account</UiDropdownMenuLabel>
      <UiDropdownMenuGroup>
        <UiDropdownMenuItem>
          Profile
          <UiDropdownMenuShortcut>⇧⌘P</UiDropdownMenuShortcut>
        </UiDropdownMenuItem>
        <UiDropdownMenuItem>
          Billing
          <UiDropdownMenuShortcut>⌘B</UiDropdownMenuShortcut>
        </UiDropdownMenuItem>
        <UiDropdownMenuItem>
          Settings
          <UiDropdownMenuShortcut>⌘S</UiDropdownMenuShortcut>
        </UiDropdownMenuItem>
        <UiDropdownMenuItem>
          Keyboard shortcuts
          <UiDropdownMenuShortcut>⌘K</UiDropdownMenuShortcut>
        </UiDropdownMenuItem>
      </UiDropdownMenuGroup>
      <UiDropdownMenuSeparator />
      <UiDropdownMenuGroup>
        <UiDropdownMenuItem>Team</UiDropdownMenuItem>
        <UiDropdownMenuSub>
          <UiDropdownMenuSubTrigger>Invite users</UiDropdownMenuSubTrigger>
          <UiDropdownMenuSubContent>
            <UiDropdownMenuItem>Email</UiDropdownMenuItem>
            <UiDropdownMenuItem>Message</UiDropdownMenuItem>
            <UiDropdownMenuSeparator />
            <UiDropdownMenuItem>More...</UiDropdownMenuItem>
          </UiDropdownMenuSubContent>
        </UiDropdownMenuSub>
        <UiDropdownMenuItem>
          New Team
          <UiDropdownMenuShortcut>⌘+T</UiDropdownMenuShortcut>
        </UiDropdownMenuItem>
      </UiDropdownMenuGroup>
      <UiDropdownMenuSeparator />
      <UiDropdownMenuItem>GitHub</UiDropdownMenuItem>
      <UiDropdownMenuItem>Support</UiDropdownMenuItem>
      <UiDropdownMenuItem disabled>API</UiDropdownMenuItem>
      <UiDropdownMenuSeparator />
      <UiDropdownMenuItem>
        Log out
        <UiDropdownMenuShortcut>⇧⌘Q</UiDropdownMenuShortcut>
      </UiDropdownMenuItem>
    </UiDropdownMenuContent>
  </UiDropdownMenu>
</template>`;

/**
 * Full dropdown menu example from shadcn-vue docs with labels, groups, shortcuts, and submenus.
 */
export const WithLabelsAndGroups: Story = {
  render: (args) => ({
    components: {
      UiDropdownMenu,
      UiDropdownMenuTrigger,
      UiDropdownMenuContent,
      UiDropdownMenuItem,
      UiDropdownMenuSeparator,
      UiDropdownMenuLabel,
      UiDropdownMenuGroup,
      UiDropdownMenuShortcut,
      UiDropdownMenuSub,
      UiDropdownMenuSubTrigger,
      UiDropdownMenuSubContent,
      UiButton,
    },
    setup() {
      const open = ref(args.open);
      const modal = ref(args.modal);
      watch(
        () => args.open,
        (v) => {
          open.value = v;
        },
      );
      watch(
        () => args.modal,
        (v) => {
          modal.value = v;
        },
      );
      return { open, modal };
    },
    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
      <UiDropdownMenuTrigger as-child>
        <UiButton variant="outline">Open</UiButton>
      </UiDropdownMenuTrigger>
      <UiDropdownMenuContent class="w-56" align="start">
        <UiDropdownMenuLabel>My Account</UiDropdownMenuLabel>
        <UiDropdownMenuGroup>
          <UiDropdownMenuItem>
            Profile
            <UiDropdownMenuShortcut>⇧⌘P</UiDropdownMenuShortcut>
          </UiDropdownMenuItem>
          <UiDropdownMenuItem>
            Billing
            <UiDropdownMenuShortcut>⌘B</UiDropdownMenuShortcut>
          </UiDropdownMenuItem>
          <UiDropdownMenuItem>
            Settings
            <UiDropdownMenuShortcut>⌘S</UiDropdownMenuShortcut>
          </UiDropdownMenuItem>
          <UiDropdownMenuItem>
            Keyboard shortcuts
            <UiDropdownMenuShortcut>⌘K</UiDropdownMenuShortcut>
          </UiDropdownMenuItem>
        </UiDropdownMenuGroup>
        <UiDropdownMenuSeparator />
        <UiDropdownMenuGroup>
          <UiDropdownMenuItem>Team</UiDropdownMenuItem>
          <UiDropdownMenuSub>
            <UiDropdownMenuSubTrigger>Invite users</UiDropdownMenuSubTrigger>
            <UiDropdownMenuSubContent>
              <UiDropdownMenuItem>Email</UiDropdownMenuItem>
              <UiDropdownMenuItem>Message</UiDropdownMenuItem>
              <UiDropdownMenuSeparator />
              <UiDropdownMenuItem>More...</UiDropdownMenuItem>
            </UiDropdownMenuSubContent>
          </UiDropdownMenuSub>
          <UiDropdownMenuItem>
            New Team
            <UiDropdownMenuShortcut>⌘+T</UiDropdownMenuShortcut>
          </UiDropdownMenuItem>
        </UiDropdownMenuGroup>
        <UiDropdownMenuSeparator />
        <UiDropdownMenuItem>GitHub</UiDropdownMenuItem>
        <UiDropdownMenuItem>Support</UiDropdownMenuItem>
        <UiDropdownMenuItem disabled>API</UiDropdownMenuItem>
        <UiDropdownMenuSeparator />
        <UiDropdownMenuItem>
          Log out
          <UiDropdownMenuShortcut>⇧⌘Q</UiDropdownMenuShortcut>
        </UiDropdownMenuItem>
      </UiDropdownMenuContent>
    </UiDropdownMenu>`,
  }),
  parameters: {
    docs: {
      source: {
        code: withLabelsTemplateSource,
      },
    },
  },
};

const checkboxTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiDropdownMenu,
  UiDropdownMenuTrigger,
  UiDropdownMenuContent,
  UiDropdownMenuLabel,
  UiDropdownMenuSeparator,
  UiDropdownMenuCheckboxItem,
  UiButton,
} from '@aleph-alpha/ui-library'

const open = ref(false)
const showStatusBar = ref(true)
const showActivityBar = ref(false)
const showPanel = ref(true)
</script>

<template>
  <UiDropdownMenu v-model:open="open">
    <UiDropdownMenuTrigger as-child>
      <UiButton variant="outline">View Options</UiButton>
    </UiDropdownMenuTrigger>
    <UiDropdownMenuContent>
      <UiDropdownMenuLabel>Appearance</UiDropdownMenuLabel>
      <UiDropdownMenuSeparator />
      <UiDropdownMenuCheckboxItem v-model:checked="showStatusBar">
        Status Bar
      </UiDropdownMenuCheckboxItem>
      <UiDropdownMenuCheckboxItem v-model:checked="showActivityBar">
        Activity Bar
      </UiDropdownMenuCheckboxItem>
      <UiDropdownMenuCheckboxItem v-model:checked="showPanel">
        Panel
      </UiDropdownMenuCheckboxItem>
    </UiDropdownMenuContent>
  </UiDropdownMenu>
</template>`;

/**
 * Dropdown menu with toggleable checkbox items.
 */
export const WithCheckboxItems: Story = {
  render: (args) => ({
    components: {
      UiDropdownMenu,
      UiDropdownMenuTrigger,
      UiDropdownMenuContent,
      UiDropdownMenuLabel,
      UiDropdownMenuSeparator,
      UiDropdownMenuCheckboxItem,
      UiButton,
    },
    setup() {
      const open = ref(args.open);
      const modal = ref(args.modal);
      const showStatusBar = ref(true);
      const showActivityBar = ref(false);
      const showPanel = ref(true);
      watch(
        () => args.open,
        (v) => {
          open.value = v;
        },
      );
      watch(
        () => args.modal,
        (v) => {
          modal.value = v;
        },
      );
      return { open, modal, showStatusBar, showActivityBar, showPanel };
    },
    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
      <UiDropdownMenuTrigger as-child>
        <UiButton variant="outline">View Options</UiButton>
      </UiDropdownMenuTrigger>
      <UiDropdownMenuContent>
        <UiDropdownMenuLabel>Appearance</UiDropdownMenuLabel>
        <UiDropdownMenuSeparator />
        <UiDropdownMenuCheckboxItem v-model:checked="showStatusBar">
          Status Bar
        </UiDropdownMenuCheckboxItem>
        <UiDropdownMenuCheckboxItem v-model:checked="showActivityBar">
          Activity Bar
        </UiDropdownMenuCheckboxItem>
        <UiDropdownMenuCheckboxItem v-model:checked="showPanel">
          Panel
        </UiDropdownMenuCheckboxItem>
      </UiDropdownMenuContent>
    </UiDropdownMenu>`,
  }),
  parameters: {
    docs: {
      source: {
        code: checkboxTemplateSource,
      },
    },
  },
};

const radioTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiDropdownMenu,
  UiDropdownMenuTrigger,
  UiDropdownMenuContent,
  UiDropdownMenuLabel,
  UiDropdownMenuSeparator,
  UiDropdownMenuRadioGroup,
  UiDropdownMenuRadioItem,
  UiButton,
} from '@aleph-alpha/ui-library'

const open = ref(false)
const position = ref('bottom')
</script>

<template>
  <UiDropdownMenu v-model:open="open">
    <UiDropdownMenuTrigger as-child>
      <UiButton variant="outline">Select Position</UiButton>
    </UiDropdownMenuTrigger>
    <UiDropdownMenuContent>
      <UiDropdownMenuLabel>Panel Position</UiDropdownMenuLabel>
      <UiDropdownMenuSeparator />
      <UiDropdownMenuRadioGroup v-model="position">
        <UiDropdownMenuRadioItem value="top">Top</UiDropdownMenuRadioItem>
        <UiDropdownMenuRadioItem value="bottom">Bottom</UiDropdownMenuRadioItem>
        <UiDropdownMenuRadioItem value="right">Right</UiDropdownMenuRadioItem>
      </UiDropdownMenuRadioGroup>
    </UiDropdownMenuContent>
  </UiDropdownMenu>
</template>`;

/**
 * Dropdown menu with radio items for exclusive selection.
 */
export const WithRadioItems: Story = {
  render: (args) => ({
    components: {
      UiDropdownMenu,
      UiDropdownMenuTrigger,
      UiDropdownMenuContent,
      UiDropdownMenuLabel,
      UiDropdownMenuSeparator,
      UiDropdownMenuRadioGroup,
      UiDropdownMenuRadioItem,
      UiButton,
    },
    setup() {
      const open = ref(args.open);
      const modal = ref(args.modal);
      const position = ref('bottom');
      watch(
        () => args.open,
        (v) => {
          open.value = v;
        },
      );
      watch(
        () => args.modal,
        (v) => {
          modal.value = v;
        },
      );
      return { open, modal, position };
    },
    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
      <UiDropdownMenuTrigger as-child>
        <UiButton variant="outline">Select Position</UiButton>
      </UiDropdownMenuTrigger>
      <UiDropdownMenuContent>
        <UiDropdownMenuLabel>Panel Position</UiDropdownMenuLabel>
        <UiDropdownMenuSeparator />
        <UiDropdownMenuRadioGroup v-model="position">
          <UiDropdownMenuRadioItem value="top">Top</UiDropdownMenuRadioItem>
          <UiDropdownMenuRadioItem value="bottom">Bottom</UiDropdownMenuRadioItem>
          <UiDropdownMenuRadioItem value="right">Right</UiDropdownMenuRadioItem>
        </UiDropdownMenuRadioGroup>
      </UiDropdownMenuContent>
    </UiDropdownMenu>`,
  }),
  parameters: {
    docs: {
      source: {
        code: radioTemplateSource,
      },
    },
  },
};

const destructiveTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiDropdownMenu,
  UiDropdownMenuTrigger,
  UiDropdownMenuContent,
  UiDropdownMenuItem,
  UiDropdownMenuSeparator,
  UiButton,
} from '@aleph-alpha/ui-library'

const open = ref(false)
</script>

<template>
  <UiDropdownMenu v-model:open="open">
    <UiDropdownMenuTrigger as-child>
      <UiButton variant="outline">Actions</UiButton>
    </UiDropdownMenuTrigger>
    <UiDropdownMenuContent>
      <UiDropdownMenuItem>Edit</UiDropdownMenuItem>
      <UiDropdownMenuItem>Duplicate</UiDropdownMenuItem>
      <UiDropdownMenuItem>Archive</UiDropdownMenuItem>
      <UiDropdownMenuSeparator />
      <UiDropdownMenuItem variant="destructive">Delete</UiDropdownMenuItem>
    </UiDropdownMenuContent>
  </UiDropdownMenu>
</template>`;

/**
 * Dropdown menu with destructive action (delete, remove, etc.).
 */
export const WithDestructiveAction: Story = {
  render: (args) => ({
    components: {
      UiDropdownMenu,
      UiDropdownMenuTrigger,
      UiDropdownMenuContent,
      UiDropdownMenuItem,
      UiDropdownMenuSeparator,
      UiButton,
    },
    setup() {
      const open = ref(args.open);
      const modal = ref(args.modal);
      watch(
        () => args.open,
        (v) => {
          open.value = v;
        },
      );
      watch(
        () => args.modal,
        (v) => {
          modal.value = v;
        },
      );
      return { open, modal };
    },
    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
      <UiDropdownMenuTrigger as-child>
        <UiButton variant="outline">Actions</UiButton>
      </UiDropdownMenuTrigger>
      <UiDropdownMenuContent>
        <UiDropdownMenuItem>Edit</UiDropdownMenuItem>
        <UiDropdownMenuItem>Duplicate</UiDropdownMenuItem>
        <UiDropdownMenuItem>Archive</UiDropdownMenuItem>
        <UiDropdownMenuSeparator />
        <UiDropdownMenuItem variant="destructive">Delete</UiDropdownMenuItem>
      </UiDropdownMenuContent>
    </UiDropdownMenu>`,
  }),
  parameters: {
    docs: {
      source: {
        code: destructiveTemplateSource,
      },
    },
  },
};

const submenuTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiDropdownMenu,
  UiDropdownMenuTrigger,
  UiDropdownMenuContent,
  UiDropdownMenuItem,
  UiDropdownMenuSeparator,
  UiDropdownMenuSub,
  UiDropdownMenuSubTrigger,
  UiDropdownMenuSubContent,
  UiButton,
} from '@aleph-alpha/ui-library'

const open = ref(false)
</script>

<template>
  <UiDropdownMenu v-model:open="open">
    <UiDropdownMenuTrigger as-child>
      <UiButton variant="outline">Options</UiButton>
    </UiDropdownMenuTrigger>
    <UiDropdownMenuContent>
      <UiDropdownMenuItem>New File</UiDropdownMenuItem>
      <UiDropdownMenuItem>New Window</UiDropdownMenuItem>
      <UiDropdownMenuSeparator />
      <UiDropdownMenuSub>
        <UiDropdownMenuSubTrigger>Share</UiDropdownMenuSubTrigger>
        <UiDropdownMenuSubContent>
          <UiDropdownMenuItem>Email</UiDropdownMenuItem>
          <UiDropdownMenuItem>Messages</UiDropdownMenuItem>
          <UiDropdownMenuItem>Notes</UiDropdownMenuItem>
        </UiDropdownMenuSubContent>
      </UiDropdownMenuSub>
      <UiDropdownMenuSeparator />
      <UiDropdownMenuItem>Print</UiDropdownMenuItem>
    </UiDropdownMenuContent>
  </UiDropdownMenu>
</template>`;

/**
 * Dropdown menu with nested submenu.
 */
export const WithSubmenu: Story = {
  render: (args) => ({
    components: {
      UiDropdownMenu,
      UiDropdownMenuTrigger,
      UiDropdownMenuContent,
      UiDropdownMenuItem,
      UiDropdownMenuSeparator,
      UiDropdownMenuSub,
      UiDropdownMenuSubTrigger,
      UiDropdownMenuSubContent,
      UiButton,
    },
    setup() {
      const open = ref(args.open);
      const modal = ref(args.modal);
      watch(
        () => args.open,
        (v) => {
          open.value = v;
        },
      );
      watch(
        () => args.modal,
        (v) => {
          modal.value = v;
        },
      );
      return { open, modal };
    },
    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
      <UiDropdownMenuTrigger as-child>
        <UiButton variant="outline">Options</UiButton>
      </UiDropdownMenuTrigger>
      <UiDropdownMenuContent>
        <UiDropdownMenuItem>New File</UiDropdownMenuItem>
        <UiDropdownMenuItem>New Window</UiDropdownMenuItem>
        <UiDropdownMenuSeparator />
        <UiDropdownMenuSub>
          <UiDropdownMenuSubTrigger>Share</UiDropdownMenuSubTrigger>
          <UiDropdownMenuSubContent>
            <UiDropdownMenuItem>Email</UiDropdownMenuItem>
            <UiDropdownMenuItem>Messages</UiDropdownMenuItem>
            <UiDropdownMenuItem>Notes</UiDropdownMenuItem>
          </UiDropdownMenuSubContent>
        </UiDropdownMenuSub>
        <UiDropdownMenuSeparator />
        <UiDropdownMenuItem>Print</UiDropdownMenuItem>
      </UiDropdownMenuContent>
    </UiDropdownMenu>`,
  }),
  parameters: {
    docs: {
      source: {
        code: submenuTemplateSource,
      },
    },
  },
};

const iconTriggerTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiDropdownMenu,
  UiDropdownMenuTrigger,
  UiDropdownMenuContent,
  UiDropdownMenuItem,
  UiButton,
  UiIcon,
} from '@aleph-alpha/ui-library'

const open = ref(false)
</script>

<template>
  <UiDropdownMenu v-model:open="open">
    <UiDropdownMenuTrigger as-child>
      <UiButton size="icon" aria-label="Open menu" variant="ghost">
        <UiIcon name="more-vertical" :size="20" />
      </UiButton>
    </UiDropdownMenuTrigger>
    <UiDropdownMenuContent>
      <UiDropdownMenuItem>View Details</UiDropdownMenuItem>
      <UiDropdownMenuItem>Share</UiDropdownMenuItem>
      <UiDropdownMenuItem>Download</UiDropdownMenuItem>
    </UiDropdownMenuContent>
  </UiDropdownMenu>
</template>`;

/**
 * Dropdown menu with an icon-only `UiButton` trigger.
 */
export const WithIconTrigger: Story = {
  render: (args) => ({
    components: {
      UiDropdownMenu,
      UiDropdownMenuTrigger,
      UiDropdownMenuContent,
      UiDropdownMenuItem,
      UiButton,
      UiIcon,
    },
    setup() {
      const open = ref(args.open);
      const modal = ref(args.modal);
      watch(
        () => args.open,
        (v) => {
          open.value = v;
        },
      );
      watch(
        () => args.modal,
        (v) => {
          modal.value = v;
        },
      );
      return { open, modal };
    },
    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
      <UiDropdownMenuTrigger as-child>
        <UiButton size="icon" aria-label="Open menu" variant="ghost">
          <UiIcon name="more-vertical" :size="20" />
        </UiButton>
      </UiDropdownMenuTrigger>
      <UiDropdownMenuContent>
        <UiDropdownMenuItem>View Details</UiDropdownMenuItem>
        <UiDropdownMenuItem>Share</UiDropdownMenuItem>
        <UiDropdownMenuItem>Download</UiDropdownMenuItem>
      </UiDropdownMenuContent>
    </UiDropdownMenu>`,
  }),
  parameters: {
    docs: {
      source: {
        code: iconTriggerTemplateSource,
      },
    },
  },
};

const softToggleTriggerTemplateSource = `<script setup lang="ts">
import { computed, ref } from 'vue'
import {
  UiDropdownMenu,
  UiDropdownMenuTrigger,
  UiDropdownMenuContent,
  UiDropdownMenuItem,
  UiDropdownMenuSeparator,
  UiToggle,
  UiIcon,
} from '@aleph-alpha/ui-library'

const open = ref(false)
const activeFilter = ref('')
const hasFilter = computed(() => !!activeFilter.value)
const toggleVariant = computed(() => {
  if (open.value) return 'soft'
  if (hasFilter.value) return 'outline'
  return 'default'
})
const toggleActive = computed({
  get: () => open.value,
  set: () => {},
})
</script>

<template>
  <UiDropdownMenu v-model:open="open">
    <UiDropdownMenuTrigger as-child>
      <UiToggle v-model="toggleActive" :variant="toggleVariant" aria-label="Filter options">
        <UiIcon name="filter" />
      </UiToggle>
    </UiDropdownMenuTrigger>
    <UiDropdownMenuContent>
      <UiDropdownMenuItem @select="activeFilter = 'name'">By Name</UiDropdownMenuItem>
      <UiDropdownMenuItem @select="activeFilter = 'date'">By Date</UiDropdownMenuItem>
      <UiDropdownMenuItem @select="activeFilter = 'size'">By Size</UiDropdownMenuItem>
      <UiDropdownMenuSeparator />
      <UiDropdownMenuItem @select="activeFilter = ''">Clear Filters</UiDropdownMenuItem>
    </UiDropdownMenuContent>
  </UiDropdownMenu>
</template>`;

/**
 * Dropdown menu with a soft toggle trigger. Switches to outline variant
 * when a filter is selected, and back to default when filters are cleared.
 */
export const WithSoftToggleTrigger: Story = {
  render: (args) => ({
    components: {
      UiDropdownMenu,
      UiDropdownMenuTrigger,
      UiDropdownMenuContent,
      UiDropdownMenuItem,
      UiDropdownMenuSeparator,
      UiToggle,
      UiIcon,
    },
    setup() {
      const open = ref(args.open);
      const modal = ref(args.modal);
      const activeFilter = ref('');
      const hasFilter = computed(() => !!activeFilter.value);
      const toggleVariant = computed(() => {
        if (open.value) return 'soft';
        if (hasFilter.value) return 'outline';
        return 'default';
      });
      const toggleActive = computed({
        get: () => open.value,
        set: (value: boolean) => {
          open.value = value;
        },
      });
      watch(
        () => args.open,
        (v) => {
          open.value = v;
        },
      );
      watch(
        () => args.modal,
        (v) => {
          modal.value = v;
        },
      );
      return {
        open,
        modal,
        activeFilter,
        hasFilter,
        toggleVariant,
        toggleActive,
      };
    },
    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
      <UiDropdownMenuTrigger as-child>
        <UiToggle v-model="toggleActive" :variant="toggleVariant" aria-label="Filter options">
          <UiIcon name="filter" />
        </UiToggle>
      </UiDropdownMenuTrigger>
      <UiDropdownMenuContent>
        <UiDropdownMenuItem @select="activeFilter = 'name'">By Name</UiDropdownMenuItem>
        <UiDropdownMenuItem @select="activeFilter = 'date'">By Date</UiDropdownMenuItem>
        <UiDropdownMenuItem @select="activeFilter = 'size'">By Size</UiDropdownMenuItem>
        <UiDropdownMenuSeparator />
        <UiDropdownMenuItem @select="activeFilter = ''">Clear Filters</UiDropdownMenuItem>
      </UiDropdownMenuContent>
    </UiDropdownMenu>`,
  }),
  parameters: {
    docs: {
      source: {
        code: softToggleTriggerTemplateSource,
      },
    },
  },
};

const softToggleTriggerWithTextTemplateSource = `<script setup lang="ts">
import { computed, ref } from 'vue'
import {
  UiDropdownMenu,
  UiDropdownMenuTrigger,
  UiDropdownMenuContent,
  UiDropdownMenuLabel,
  UiDropdownMenuSeparator,
  UiDropdownMenuCheckboxItem,
  UiToggle,
  UiIcon,
} from '@aleph-alpha/ui-library'

const open = ref(false)
const showPreview = ref(false)
const showMetadata = ref(false)
const showTimestamps = ref(false)
const hasSelection = computed(() => showPreview.value || showMetadata.value || showTimestamps.value)
const toggleVariant = computed(() => {
  if (open.value) return 'soft'
  if (hasSelection.value) return 'outline'
  return 'default'
})
const toggleActive = computed({
  get: () => open.value,
  set: () => {},
})
</script>

<template>
  <UiDropdownMenu v-model:open="open">
    <UiDropdownMenuTrigger as-child>
      <UiToggle v-model="toggleActive" :variant="toggleVariant" aria-label="View settings">
        <UiIcon name="settings" />
        View
        <UiIcon name="chevron-down" class="size-3" />
      </UiToggle>
    </UiDropdownMenuTrigger>
    <UiDropdownMenuContent class="w-48">
      <UiDropdownMenuLabel>Display Options</UiDropdownMenuLabel>
      <UiDropdownMenuSeparator />
      <UiDropdownMenuCheckboxItem v-model:checked="showPreview">
        Show Preview
      </UiDropdownMenuCheckboxItem>
      <UiDropdownMenuCheckboxItem v-model:checked="showMetadata">
        Show Metadata
      </UiDropdownMenuCheckboxItem>
      <UiDropdownMenuCheckboxItem v-model:checked="showTimestamps">
        Show Timestamps
      </UiDropdownMenuCheckboxItem>
    </UiDropdownMenuContent>
  </UiDropdownMenu>
</template>`;

/**
 * Dropdown menu with a toggle trigger that switches to outline variant
 * when any checkbox option is selected. Unchecking all reverts to default.
 */
export const WithSoftToggleTriggerAndText: Story = {
  render: (args) => ({
    components: {
      UiDropdownMenu,
      UiDropdownMenuTrigger,
      UiDropdownMenuContent,
      UiDropdownMenuLabel,
      UiDropdownMenuSeparator,
      UiDropdownMenuCheckboxItem,
      UiToggle,
      UiIcon,
    },
    setup() {
      const open = ref(args.open);
      const modal = ref(args.modal);
      const showPreview = ref(false);
      const showMetadata = ref(false);
      const showTimestamps = ref(false);
      const hasSelection = computed(
        () => showPreview.value || showMetadata.value || showTimestamps.value,
      );
      const toggleVariant = computed(() => {
        if (open.value) return 'soft';
        if (hasSelection.value) return 'outline';
        return 'default';
      });
      const toggleActive = computed({
        get: () => open.value,
        set: (value: boolean) => {
          open.value = value;
        },
      });
      watch(
        () => args.open,
        (v) => {
          open.value = v;
        },
      );
      watch(
        () => args.modal,
        (v) => {
          modal.value = v;
        },
      );
      return {
        open,
        modal,
        showPreview,
        showMetadata,
        showTimestamps,
        hasSelection,
        toggleVariant,
        toggleActive,
      };
    },
    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
      <UiDropdownMenuTrigger as-child>
        <UiToggle v-model="toggleActive" :variant="toggleVariant" aria-label="View settings">
          <UiIcon name="settings" />
          View
          <UiIcon name="chevron-down" class="size-3" />
        </UiToggle>
      </UiDropdownMenuTrigger>
      <UiDropdownMenuContent class="w-48">
        <UiDropdownMenuLabel>Display Options</UiDropdownMenuLabel>
        <UiDropdownMenuSeparator />
        <UiDropdownMenuCheckboxItem v-model:checked="showPreview">
          Show Preview
        </UiDropdownMenuCheckboxItem>
        <UiDropdownMenuCheckboxItem v-model:checked="showMetadata">
          Show Metadata
        </UiDropdownMenuCheckboxItem>
        <UiDropdownMenuCheckboxItem v-model:checked="showTimestamps">
          Show Timestamps
        </UiDropdownMenuCheckboxItem>
      </UiDropdownMenuContent>
    </UiDropdownMenu>`,
  }),
  parameters: {
    docs: {
      source: {
        code: softToggleTriggerWithTextTemplateSource,
      },
    },
  },
};

const avatarTriggerTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiDropdownMenu,
  UiDropdownMenuTrigger,
  UiDropdownMenuContent,
  UiDropdownMenuItem,
  UiDropdownMenuSeparator,
  UiButton,
  UiAvatar,
  UiAvatarImage,
  UiAvatarFallback,
  UiIcon,
} from '@aleph-alpha/ui-library'

const open = ref(false)
</script>

<template>
  <UiDropdownMenu v-model:open="open">
    <UiDropdownMenuTrigger as-child>
      <UiButton variant="outline" class="h-auto gap-3 px-3 py-2">
        <UiAvatar>
          <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <UiAvatarFallback>CN</UiAvatarFallback>
        </UiAvatar>
        <div class="flex flex-col items-start overflow-hidden">
          <span class="truncate text-sm font-medium">Sofia Davis</span>
          <span class="truncate text-xs text-muted-foreground font-normal">sofia@example.com</span>
        </div>
        <UiIcon name="chevrons-up-down" :size="16" class="shrink-0 text-muted-foreground" />
      </UiButton>
    </UiDropdownMenuTrigger>
    <UiDropdownMenuContent class="w-56" align="start">
      <UiDropdownMenuItem>Profile</UiDropdownMenuItem>
      <UiDropdownMenuItem>Settings</UiDropdownMenuItem>
      <UiDropdownMenuItem>Notifications</UiDropdownMenuItem>
      <UiDropdownMenuSeparator />
      <UiDropdownMenuItem>Sign Out</UiDropdownMenuItem>
    </UiDropdownMenuContent>
  </UiDropdownMenu>
</template>`;

/**
 * Dropdown menu with a trigger containing an avatar, title, description, and chevron icon.
 */
export const WithAvatarTrigger: Story = {
  render: (args) => ({
    components: {
      UiDropdownMenu,
      UiDropdownMenuTrigger,
      UiDropdownMenuContent,
      UiDropdownMenuItem,
      UiDropdownMenuSeparator,
      UiButton,
      UiAvatar,
      UiAvatarFallback,
      UiAvatarImage,
      UiIcon,
    },
    setup() {
      const open = ref(args.open);
      const modal = ref(args.modal);
      watch(
        () => args.open,
        (v) => {
          open.value = v;
        },
      );
      watch(
        () => args.modal,
        (v) => {
          modal.value = v;
        },
      );
      return { open, modal };
    },
    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
      <UiDropdownMenuTrigger as-child>
        <UiButton variant="outline" class="h-auto gap-3 px-3 py-2">
          <UiAvatar>
            <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
            <UiAvatarFallback>CN</UiAvatarFallback>
          </UiAvatar>
          <div class="flex flex-col items-start overflow-hidden">
            <span class="truncate text-sm font-medium">Sofia Davis</span>
            <span class="truncate text-xs text-muted-foreground font-normal">sofia@example.com</span>
          </div>
          <UiIcon name="chevrons-up-down" :size="16" class="shrink-0 text-muted-foreground" />
        </UiButton>
      </UiDropdownMenuTrigger>
      <UiDropdownMenuContent class="w-56" align="start">
        <UiDropdownMenuItem>Profile</UiDropdownMenuItem>
        <UiDropdownMenuItem>Settings</UiDropdownMenuItem>
        <UiDropdownMenuItem>Notifications</UiDropdownMenuItem>
        <UiDropdownMenuSeparator />
        <UiDropdownMenuItem>Sign Out</UiDropdownMenuItem>
      </UiDropdownMenuContent>
    </UiDropdownMenu>`,
  }),
  parameters: {
    docs: {
      source: {
        code: avatarTriggerTemplateSource,
      },
    },
  },
};
