import type { Meta, StoryObj } from '@storybook/vue3'
import { UListItemGroup } from '../components/UListItemGroup'
import { UListItem } from '../components/UListItemGroup/UListItem'

import { ref } from 'vue'

const meta: Meta<typeof UListItemGroup> = {
  title: 'Example/ListItemGroup',
  component: UListItemGroup,
  tags: ['autodocs'],
  argTypes: {
    disabled: { control: 'boolean', defaultValue: false },
    position: {
      control: 'select',
      options: ['bottom', 'right', 'left'],
    },
    type: {
      control: 'select',
      options: ['default', 'small'],
    },
    color: {
      control: 'text',
    },
  },
}

export default meta

type Story = StoryObj<typeof UListItemGroup>

export const ListGroup: Story = {
  render: (args: any) => ({
    components: { UListItemGroup, UListItem },
    setup() {
      const currentItemId = ref('')

      const currentItemIdChange = (index: string) => {
        if (currentItemId.value != index) {
          currentItemId.value = index
        } else {
          currentItemId.value = ''
        }
      }
      const listItemClick = (e: MouseEvent) => {
        console.log(e)
      }

      return {
        args,
        currentItemId,
        currentItemIdChange,
        listItemClick,
      }
    },
    template: `
    <div class="max-w-[82px] h-[420px] px-4 pr-[18px] w-full flex flex-col gap-1 relative">
    <UListItem
      :isActive="currentItemId == 'guestListScreen'"
      disabled
      :type="args.type"
      itemId="guestListScreen"
      prependIcon="user1"
      @currentItemId="currentItemIdChange"
      @click="listItemClick"
    >
      Guest List
    </UListItem>
    <UListItem
      :isActive="currentItemId == 'messagesScreen'"
      :type="args.type"
      itemId="messagesScreen"
      :value="2"
      prependIcon="annotationDots"
      @currentItemId="currentItemIdChange"
      @click="listItemClick"
    >
      Messages
    </UListItem>
    <UListItemGroup 
      v-bind="args" 
      prependIcon= "barChartSquare2"
      :currentItemId="currentItemId" 
      @currentItemId="currentItemIdChange"
      @click="listItemClick">
      Dashboard
    </UListItemGroup>
    <UListItem
      :isActive="currentItemId == 'ordersRequestsScreen'"
      :type="args.type"
      itemId="ordersRequestsScreen"
      :value="9"
      prependIcon="shoppingBag3"
      @currentItemId="currentItemIdChange"
      @click="listItemClick"
    >
      Orders & Requests
    </UListItem>
    <UListItemGroup 
      v-bind="args"
      prependIcon= "helpCircle"
      disabled
      :currentItemId="currentItemId" 
      @currentItemId="currentItemIdChange"
      @click="listItemClick">
      Disabled Test
    </UListItemGroup>
    </div>`,
  }),

  args: {
    listItems: [
      {
        title: 'Overview',
        badge: 0,
        itemId: 'overviewScreen',
        prependIcon: 'activity',
      },
      {
        title: 'Notifications',
        badge: 10,
        itemId: 'notificationsScreen',
        prependIcon: 'notificationBox',
      },
      {
        title: 'Analytics',
        itemId: 'analyticsScreen',
        prependIcon: 'barLineChart',
      },
      {
        title: 'Saved reports',
        itemId: 'savedReportssScreen',
        prependIcon: 'star1',
      },
      {
        title: 'Scheduled reports',
        itemId: 'scheduledReportsScreen',
        prependIcon: 'clockFastForward',
      },
    ],
    currentItemId: '',
  } as any,
}

export const ListGroupAtRight: Story = {
  render: (args: any) => ({
    components: { UListItemGroup, UListItem },
    setup() {
      const currentItemId = ref('')

      const currentItemIdChange = (index: string) => {
        if (currentItemId.value != index) {
          currentItemId.value = index
        } else {
          currentItemId.value = ''
        }
      }

      return {
        args,
        currentItemId,
        currentItemIdChange,
      }
    },
    template: `
    <div class="w-[250px] h-[400px] flex flex-col gap-1 relative">
    <UListItem
      :isActive="currentItemId == 'guestListScreen'"
      itemId="guestListScreen"
      prependIcon="user1"
      @currentItemId="currentItemIdChange">
        Guest List
      </UListItem>
      <UListItem
      :isActive="currentItemId == 'messagesScreen'"
      itemId="messagesScreen"
      :value="2"
      prependIcon="annotationDots"
      @currentItemId="currentItemIdChange">
        Messages
      </UListItem>
      <UListItemGroup 
        v-bind="args" 
        :currentItemId="currentItemId" 
        @currentItemId="currentItemIdChange">
        Dashboard
      </UListItemGroup>
      <UListItem
      :isActive="currentItemId == 'ordersRequestsScreen'"
      itemId="ordersRequestsScreen"
      :value="9"
      prependIcon="shoppingBag3"
      @currentItemId="currentItemIdChange">
        Orders & Requests
      </UListItem>
    </div>`,
  }),

  args: {
    prependIcon: 'barChartSquare2',
    listItems: [
      {
        title: 'Overview',
        badge: 0,
        itemId: 'overviewScreen',
        prependIcon: 'activity',
      },
      {
        title: 'Notifications',
        badge: 10,
        itemId: 'notificationsScreen',
        prependIcon: 'notificationBox',
      },
      {
        title: 'Analytics',
        itemId: 'analyticsScreen',
        prependIcon: 'barLineChart',
      },
      {
        title: 'Saved reports',
        itemId: 'savedReportssScreen',
        prependIcon: 'star1',
      },
      {
        title: 'Scheduled reports',
        itemId: 'scheduledReportsScreen',
        prependIcon: 'clockFastForward',
      },
    ],
    currentItemId: '',
    position: 'right',
    color: 'primary-100',
  } as any,
}

export const ListGroupAtLeft: Story = {
  render: (args: any) => ({
    components: { UListItemGroup, UListItem },
    setup() {
      const currentItemId = ref('')

      const currentItemIdChange = (index: string) => {
        if (currentItemId.value != index) {
          currentItemId.value = index
        } else {
          currentItemId.value = ''
        }
      }

      return {
        args,
        currentItemId,
        currentItemIdChange,
      }
    },
    template: `
    <div class="flex w-full justify-end">
      <div class="w-[280px] h-[400px] flex flex-col gap-1 relative px-4">
      <UListItem
        :isActive="currentItemId == 'guestListScreen'"
        itemId="guestListScreen"
        prependIcon="user1"
        @currentItemId="currentItemIdChange">
          Guest List
        </UListItem>
        <UListItem
        :isActive="currentItemId == 'messagesScreen'"
        itemId="messagesScreen"
        :value="2"
        prependIcon="annotationDots"
        @currentItemId="currentItemIdChange">
          Messages
        </UListItem>
        <UListItemGroup 
          v-bind="args" 
          :currentItemId="currentItemId" 
          @currentItemId="currentItemIdChange">
          Dashboard
        </UListItemGroup>
        <UListItem
        :isActive="currentItemId == 'ordersRequestsScreen'"
        itemId="ordersRequestsScreen"
        :value="9"
        prependIcon="shoppingBag3"
        @currentItemId="currentItemIdChange">
          Orders & Requests
        </UListItem>
      </div>
    </div>`,
  }),

  args: {
    prependIcon: 'barChartSquare2',
    listItems: [
      {
        title: 'Overview',
        badge: 0,
        itemId: 'overviewScreen',
        prependIcon: 'activity',
      },
      {
        title: 'Notifications',
        badge: 10,
        itemId: 'notificationsScreen',
        prependIcon: 'notificationBox',
      },
      {
        title: 'Analytics',
        itemId: 'analyticsScreen',
        prependIcon: 'barLineChart',
      },
      {
        title: 'Saved reports',
        itemId: 'savedReportssScreen',
        prependIcon: 'star1',
      },
      {
        title: 'Scheduled reports',
        itemId: 'scheduledReportsScreen',
        prependIcon: 'clockFastForward',
      },
    ],
    currentItemId: '',
    position: 'left',
  } as any,
}

export const SmallListGroup: Story = {
  render: (args: any) => ({
    components: { UListItemGroup, UListItem },
    setup() {
      const currentItemId = ref('')

      const currentItemIdChange = (index: string) => {
        if (currentItemId.value != index) {
          currentItemId.value = index
        } else {
          currentItemId.value = ''
        }
      }

      return {
        args,
        currentItemId,
        currentItemIdChange,
      }
    },
    template: `
    <div class="">
      <div class="w-[480px] h-[560px] flex flex-col gap-1 relative px-4">
      <UListItem
        :isActive="currentItemId == 'guestListScreen'"
        itemId="guestListScreen"
        type="small"
        prependIcon="user1"
        @currentItemId="currentItemIdChange">
          Guest List
        </UListItem>
        <UListItem
        :isActive="currentItemId == 'messagesScreen'"
        itemId="messagesScreen"
        type="small"
        :value="2"
        prependIcon="annotationDots"
        @currentItemId="currentItemIdChange">
          Messages
        </UListItem>
        <UListItemGroup 
          v-bind="args" 
          :currentItemId="currentItemId" 
          @currentItemId="currentItemIdChange">
          Dashboard
        </UListItemGroup>
        <UListItem
        :isActive="currentItemId == 'ordersRequestsScreen'"
        itemId="ordersRequestsScreen"
        type="small"
        :value="9"
        prependIcon="shoppingBag3"
        @currentItemId="currentItemIdChange">
          Orders & Requests
        </UListItem>
      </div>
    </div>`,
  }),

  args: {
    prependIcon: 'barChartSquare2',
    listItems: [
      {
        title: 'Overview',
        badge: 0,
        itemId: 'overviewScreen',
        prependIcon: 'activity',
      },
      {
        title: 'Notifications',
        badge: 10,
        itemId: 'notificationsScreen',
        prependIcon: 'notificationBox',
      },
      {
        title: 'Analytics',
        itemId: 'analyticsScreen',
        prependIcon: 'barLineChart',
      },
      {
        title: 'Saved reports',
        itemId: 'savedReportssScreen',
        prependIcon: 'star1',
      },
      {
        title: 'Scheduled reports',
        itemId: 'scheduledReportsScreen',
        prependIcon: 'clockFastForward',
      },
    ],
    currentItemId: '',
    type: 'small',
  } as any,
}

export const SmallListGroupAtLeft: Story = {
  render: (args: any) => ({
    components: { UListItemGroup, UListItem },
    setup() {
      const currentItemId = ref('')

      const currentItemIdChange = (index: string) => {
        if (currentItemId.value != index) {
          currentItemId.value = index
        } else {
          currentItemId.value = ''
        }
      }

      return {
        args,
        currentItemId,
        currentItemIdChange,
      }
    },
    template: `
    <div class="w-full flex justify-end">
      <div class="w-[640px] h-[560px] flex flex-col items-end gap-1 relative px-4">
      <UListItem
        :isActive="currentItemId == 'guestListScreen'"
        itemId="guestListScreen"
        type="small"
        prependIcon="user1"
        @currentItemId="currentItemIdChange">
          Guest List
        </UListItem>
        <UListItem
        :isActive="currentItemId == 'messagesScreen'"
        itemId="messagesScreen"
        type="small"
        :value="2"
        prependIcon="annotationDots"
        @currentItemId="currentItemIdChange">
          Messages
        </UListItem>
        <UListItemGroup 
          v-bind="args" 
          :currentItemId="currentItemId" 
          @currentItemId="currentItemIdChange">
          Dashboard
        </UListItemGroup>
        <UListItem
        :isActive="currentItemId == 'ordersRequestsScreen'"
        itemId="ordersRequestsScreen"
        type="small"
        :value="9"
        prependIcon="shoppingBag3"
        @currentItemId="currentItemIdChange">
          Orders & Requests
        </UListItem>
      </div>
    </div>`,
  }),

  args: {
    prependIcon: 'barChartSquare2',
    listItems: [
      {
        title: 'Overview',
        badge: 0,
        itemId: 'overviewScreen',
        prependIcon: 'activity',
      },
      {
        title: 'Notifications',
        badge: 10,
        itemId: 'notificationsScreen',
        prependIcon: 'notificationBox',
      },
      {
        title: 'Analytics',
        itemId: 'analyticsScreen',
        prependIcon: 'barLineChart',
      },
      {
        title: 'Saved reports',
        itemId: 'savedReportssScreen',
        prependIcon: 'star1',
      },
      {
        title: 'Scheduled reports',
        itemId: 'scheduledReportsScreen',
        prependIcon: 'clockFastForward',
      },
    ],
    currentItemId: '',
    type: 'small',
    position: 'left',
    color: 'gray-50',
  } as any,
}