import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { computed, ref } from 'vue'

import CpButton from '@/components/CpButton.vue'
import CpContextualMenu from '@/components/CpContextualMenu.vue'

const meta = {
  title: 'Molecules/CpContextualMenu',
  component: CpContextualMenu,
  parameters: {
    docs: {
      description: {
        component:
          'A popover menu anchored to a trigger. Items support icons, critical styling, separators and async loading states.',
      },
    },
  },
  argTypes: {
    items: {
      control: 'object',
      description: 'The items to display in the menu',
      table: {
        type: { summary: 'object' },
        defaultValue: { summary: '[]' },
      },
    },
  },
} satisfies Meta<typeof CpContextualMenu>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Click the trigger to open a menu featuring an async "Download" action,
 * a separator and a critical "Delete" action.
 */
export const Default: Story = {
  args: {
    items: [],
  },
  render: () => ({
    components: { CpButton, CpContextualMenu },
    setup() {
      const menu = ref<InstanceType<typeof CpContextualMenu>>()
      const showMenu = (event: MouseEvent) => menu.value?.show(event)

      const isLoading = ref(false)

      const items = computed(() => [
        {
          label: 'Download',
          icon: 'download',
          isLoading: isLoading.value,
          isAsync: true,
          command: async () => {
            isLoading.value = true
            await new Promise((resolve) => setTimeout(resolve, 2000))
            isLoading.value = false
          },
        },
        { separator: true },
        {
          label: 'Delete',
          icon: 'trash-2',
          isCritical: true,
          command: () => alert('Delete clicked'),
        },
      ])

      return { menu, showMenu, isLoading, items }
    },
    template: `
      <CpButton @click="showMenu">Open menu</CpButton>
      <CpContextualMenu :items="items" ref="menu" />
    `,
  }),
}