import VList from './VList.vue';
import VListItem from './VListItem.vue'; // VList will contain VListItems
import VBadge from './VBadge.vue'; // For complex VListItem content example
import VAvatar from './VAvatar.vue'; // For complex VListItem content example
import VButton from './VButton.vue'; // For swipe actions example
import type { Meta, StoryObj } from '@storybook/vue3';

const meta: Meta<typeof VList> = {
  title: 'Valerie/VList',
  component: VList,
  tags: ['autodocs'],
  // No args for VList itself currently
  parameters: {
    docs: {
      description: {
        component: '`VList` is a container component for `VListItem` components or other list content. It applies basic list styling.',
      },
    },
  },
};

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

export const DefaultWithItems: Story = {
  render: (args) => ({
    components: { VList, VListItem, VBadge, VAvatar, VButton }, // Register all used components
    setup() {
      // Data for the list items
      const items = ref([
        { id: 1, text: 'Pay utility bills', completed: false, swipable: true, isSwiped: false, avatar: 'https://via.placeholder.com/40x40.png?text=U', badgeText: 'Urgent', badgeVariant: 'danger' },
        { id: 2, text: 'Schedule doctor appointment', completed: true, swipable: false, avatar: 'https://via.placeholder.com/40x40.png?text=D', badgeText: 'Done', badgeVariant: 'settled' },
        { id: 3, text: 'Grocery shopping for the week', completed: false, swipable: true, isSwiped: false, avatar: 'https://via.placeholder.com/40x40.png?text=G', badgeText: 'Pending', badgeVariant: 'pending' },
        { id: 4, text: 'Book flight tickets for vacation', completed: false, swipable: false, avatar: 'https://via.placeholder.com/40x40.png?text=F' },
      ]);

      const toggleSwipe = (item) => {
        item.isSwiped = !item.isSwiped;
      };

      const markComplete = (item) => {
        item.completed = !item.completed;
      }

      const deleteItem = (itemId) => {
        items.value = items.value.filter(i => i.id !== itemId);
        alert(`Item ${itemId} deleted (simulated)`);
      }

      return { args, items, toggleSwipe, markComplete, deleteItem };
    },
    template: `
      <VList>
        <VListItem
          v-for="item in items"
          :key="item.id"
          :completed="item.completed"
          :swipable="item.swipable"
          :isSwiped="item.isSwiped"
          @click="item.swipable ? toggleSwipe(item) : markComplete(item)"
          style="border-bottom: 1px solid #eee;"
        >
          <div style="display: flex; align-items: center; width: 100%;">
            <VAvatar v-if="item.avatar" :src="item.avatar" :initials="item.text.substring(0,1)" style="margin-right: 12px;" />
            <span style="flex-grow: 1;">{{ item.text }}</span>
            <VBadge v-if="item.badgeText" :text="item.badgeText" :variant="item.badgeVariant" style="margin-left: 12px;" />
          </div>
          <template #swipe-actions-right>
            <VButton variant="danger" size="sm" @click.stop="deleteItem(item.id)" style="height: 100%; border-radius:0;">Delete</VButton>
            <VButton variant="neutral" size="sm" @click.stop="toggleSwipe(item)" style="height: 100%; border-radius:0;">Cancel</VButton>
          </template>
        </VListItem>
        <VListItem v-if="!items.length">No items in the list.</VListItem>
      </VList>
    `,
  }),
  args: {},
};

export const EmptyList: Story = {
  render: (args) => ({
    components: { VList, VListItem },
    setup() {
      return { args };
    },
    template: `
      <VList>
        <VListItem>The list is currently empty.</VListItem>
      </VList>
    `,
  }),
  args: {},
  parameters: {
    docs: {
      description: { story: 'An example of an empty `VList`. It can contain a single `VListItem` with a message, or be programmatically emptied.' },
    },
  },
};

export const ListWithSimpleTextItems: Story = {
  render: (args) => ({
    components: { VList, VListItem },
    setup() { return { args }; },
    template: `
      <VList>
        <VListItem style="border-bottom: 1px solid #eee;">First item</VListItem>
        <VListItem style="border-bottom: 1px solid #eee;">Second item</VListItem>
        <VListItem>Third item</VListItem>
      </VList>
    `
  }),
  args: {}
};
