import VListItem from './VListItem.vue';
import VList from './VList.vue'; // For context
import VBadge from './VBadge.vue';
import VAvatar from './VAvatar.vue';
import VButton from './VButton.vue'; // For swipe actions
import VIcon from './VIcon.vue'; // For swipe actions
import type { Meta, StoryObj } from '@storybook/vue3';
import { ref } from 'vue'; // For reactive props in stories

const meta: Meta<typeof VListItem> = {
  title: 'Valerie/VListItem',
  component: VListItem,
  tags: ['autodocs'],
  argTypes: {
    completed: { control: 'boolean' },
    swipable: { control: 'boolean' },
    isSwiped: { control: 'boolean', description: 'Controls the visual swipe state (reveals actions). Requires `swipable` to be true.' },
    // Slots are demonstrated in individual stories
    default: { table: { disable: true } },
    'swipe-actions-right': { table: { disable: true } },
    'swipe-actions-left': { table: { disable: true } },
  },
  decorators: [(story) => ({ components: { VList, story }, template: '<VList><story/></VList>' })], // Wrap stories in VList
  parameters: {
    docs: {
      description: {
        component: '`VListItem` represents an individual item in a `VList`. It supports various states like completed, swipable, and can contain complex content including swipe actions.',
      },
    },
  },
};

export default meta;
type Story = StoryObj<typeof VListItem>;

export const Basic: Story = {
  render: (args) => ({
    components: { VListItem },
    setup() { return { args }; },
    template: '<VListItem v-bind="args">Basic List Item</VListItem>',
  }),
  args: {
    completed: false,
    swipable: false,
    isSwiped: false,
  },
};

export const Completed: Story = {
  ...Basic, // Reuses render from Basic
  args: {
    ...Basic.args,
    completed: true,
    defaultSlotContent: 'This item is marked as completed.',
  },
  // Need to adjust template if defaultSlotContent is used as a prop for story text
  render: (args) => ({
    components: { VListItem },
    setup() { return { args }; },
    template: '<VListItem :completed="args.completed" :swipable="args.swipable" :isSwiped="args.isSwiped">{{ args.defaultSlotContent }}</VListItem>',
  }),
};

export const Swipable: Story = {
  render: (args) => ({
    components: { VListItem, VButton, VIcon },
    setup() {
      // In a real app, isSwiped would be part of component's internal state or controlled by a swipe library.
      // Here, we make it a reactive prop for the story to toggle.
      const isSwipedState = ref(args.isSwiped);
      const toggleSwipe = () => {
        if (args.swipable) {
          isSwipedState.value = !isSwipedState.value;
        }
      };
      return { args, isSwipedState, toggleSwipe };
    },
    template: `
      <VListItem
        :swipable="args.swipable"
        :isSwiped="isSwipedState"
        :completed="args.completed"
        @click="toggleSwipe"
      >
        {{ args.defaultSlotContent }}
        <template #swipe-actions-right>
          <VButton variant="danger" size="sm" @click.stop="() => alert('Delete clicked')" style="height:100%; border-radius:0;">
            <VIcon name="close" /> Delete
          </VButton>
          <VButton variant="neutral" size="sm" @click.stop="toggleSwipe" style="height:100%; border-radius:0;">
            Cancel
          </VButton>
        </template>
        <template #swipe-actions-left>
           <VButton variant="primary" size="sm" @click.stop="() => alert('Archive clicked')" style="height:100%; border-radius:0;">
            <VIcon name="alert" /> Archive
          </VButton>
        </template>
      </VListItem>
    `,
  }),
  args: {
    swipable: true,
    isSwiped: false, // Initial state for the story control
    completed: false,
    defaultSlotContent: 'This item is swipable. Click to toggle swipe state for demo.',
  },
};

export const SwipedToShowActions: Story = {
  ...Swipable, // Reuses render and setup from Swipable story
  args: {
    ...Swipable.args,
    isSwiped: true, // Start in the "swiped" state
    defaultSlotContent: 'This item is shown as already swiped (revealing right actions). Click to toggle.',
  },
};


export const WithComplexContent: Story = {
  render: (args) => ({
    components: { VListItem, VAvatar, VBadge },
    setup() { return { args }; },
    template: `
      <VListItem :completed="args.completed" :swipable="args.swipable" :isSwiped="args.isSwiped">
        <div style="display: flex; align-items: center; width: 100%;">
          <VAvatar :src="args.avatarSrc" :initials="args.avatarInitials" style="margin-right: 12px;" />
          <div style="flex-grow: 1;">
            <div style="font-weight: 500;">{{ args.title }}</div>
            <div style="font-size: 0.9em; color: #555;">{{ args.subtitle }}</div>
          </div>
          <VBadge :text="args.badgeText" :variant="args.badgeVariant" />
        </div>
      </VListItem>
    `,
  }),
  args: {
    completed: false,
    swipable: false,
    isSwiped: false,
    avatarSrc: 'https://via.placeholder.com/40x40.png?text=CX',
    avatarInitials: 'CX',
    title: 'Complex Item Title',
    subtitle: 'Subtitle with additional information',
    badgeText: 'New',
    badgeVariant: 'accent',
  },
};

export const CompletedWithComplexContent: Story = {
  ...WithComplexContent, // Reuses render from WithComplexContent
  args: {
    ...WithComplexContent.args,
    completed: true,
    badgeText: 'Finished',
    badgeVariant: 'settled',
  },
};
