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

import CpButton from '@/components/CpButton.vue'
import CpIcon from '@/components/CpIcon.vue'
import CpItemActions from '@/components/CpItemActions.vue'
import CpTransitionListItems from '@/components/CpTransitionListItems.vue'

interface LineItem {
  id: string
  label: string
}

const meta = {
  title: 'Transitions/CpTransitionListItems',
  component: CpTransitionListItems,
  argTypes: {
    disableOnLoad: {
      control: 'boolean',
      description: 'Skips enter transition on first paint',
    },
  },
} satisfies Meta<typeof CpTransitionListItems>

export default meta
type Story = StoryObj<typeof meta>

const rowStyle = `
  display: flex;
  align-items: center;
  min-height: 48px;
  min-width: 100%;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--cp-shadows-sm);
  `

const fabWrapperStyle = {
  position: 'fixed',
  bottom: '50px',
  right: '50px',
  zIndex: 2,
  display: 'flex',
  flexDirection: 'column',
  gap: '12px',
  alignItems: 'flex-end',
}

/**
 * Animate list insertions, removals and reorders with FLIP-based
 * transitions. Use the + / shuffle buttons to see the enter, leave and
 * move animations.
 */
export const Default: Story = {
  args: {
    disableOnLoad: false,
  },
  render: (args) => ({
    components: { CpTransitionListItems, CpItemActions, CpButton, CpIcon },
    setup() {
      let idSeq = 0
      const nextId = () => {
        idSeq += 1
        return `line-${idSeq}`
      }

      const items = ref<LineItem[]>([
        { id: nextId(), label: 'Line 1' },
        { id: nextId(), label: 'Line 2' },
        { id: nextId(), label: 'Line 3' },
      ])

      const removeItem = (id: string) => {
        items.value = items.value.filter((i) => i.id !== id)
      }

      const addLine = () => {
        items.value.push({
          id: nextId(),
          label: `Line ${items.value.length + 1}`,
        })
      }

      const shuffleItems = () => {
        const arr = [...items.value]
        for (let i = arr.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1))
          ;[arr[i], arr[j]] = [arr[j], arr[i]]
        }
        items.value = arr
      }

      const deleteActionsFor = (id: string): MenuItem[] => [
        {
          icon: 'trash-2',
          label: 'Delete',
          isCritical: true,
          command: () => removeItem(id),
        },
      ]

      return { args, items, addLine, shuffleItems, deleteActionsFor, rowStyle, fabWrapperStyle }
    },
    template: `
      <div style="padding: 24px; min-width: 400px; min-height: 280px; padding-bottom: 120px;">
        <div style="position: relative;">
          <CpTransitionListItems v-bind="args">
            <div
              v-for="item in items"
              :key="item.id"
              cp-item-actions-trigger
              :style="rowStyle"
            >
              <span style="font-size: 15px;">{{ item.label }}</span>
              <CpItemActions :actions="deleteActionsFor(item.id)" style="right: var(--cp-spacing-lg)" />
            </div>
          </CpTransitionListItems>
        </div>
        <div :style="fabWrapperStyle">
          <CpButton
            appearance="secondary"
            size="lg"
            is-square
            aria-label="Shuffle order"
            @click="shuffleItems"
          >
            <template #leading-icon>
              <CpIcon type="refresh-cw" />
            </template>
          </CpButton>
          <CpButton
            appearance="primary"
            color="accent"
            size="lg"
            is-square
            aria-label="Add line"
            @click="addLine"
          >
            <template #leading-icon>
              <CpIcon type="plus" />
            </template>
          </CpButton>
        </div>
      </div>
    `,
  }),
}