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

import CpItemActions from '@/components/CpItemActions.vue'

const meta = {
  title: 'Molecules/CpItemActions',
  component: CpItemActions,
  argTypes: {
    actions: {
      control: 'object',
      description: 'The actions to display',
    },
    iconPosition: {
      control: 'select',
      options: ['horizontal', 'vertical'],
      description: 'The position of the icon',
    },
  },
} satisfies Meta<typeof CpItemActions>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Contextual action menu attached to a list item. The `cp-item-actions-trigger`
 * attribute on the parent element lets clicks through to the item while
 * still opening the menu on the trigger button.
 */
export const Default: Story = {
  args: {
    actions: [],
    iconPosition: 'horizontal',
  },
  render: (args) => ({
    components: { CpItemActions },
    setup() {
      const actions = ref<MenuItem[]>([
        {
          icon: 'edit',
          label: 'Action 1',
          command: () => alert('Action 1 clicked'),
        },
        {
          icon: 'download',
          label: 'Action 3',
          command: () => alert('Action 3 clicked'),
        },
        {
          icon: 'trash-2',
          label: 'Action 2',
          command: () => alert('Action 2 clicked'),
          isCritical: true,
        },
      ])

      const listItems = [1, 2, 3, 4]

      const listItemStyle = {
        padding: '16px',
        border: '1px solid #ccc',
        borderRadius: '12px',
        marginBottom: '16px',
      }

      const parentClick = () => alert('Parent clicked')

      return { actions, listItemStyle, listItems, parentClick, args }
    },
    template: `
      <div style="padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 400px;">
        <ul>
          <li
            v-for="(item, index) in listItems"
            :key="item"
            :style="listItemStyle"
            cp-item-actions-trigger
            @click="parentClick"
          >
            <p>Item {{ index + 1 }}</p>
            <CpItemActions size="xs" :actions="actions" :icon-position="args.iconPosition" />
          </li>
        </ul>
      </div>
    `,
  }),
}