import type { Meta, StoryObj } from '@storybook/vue3'
import { UTableProps } from '../components/UTable/UTable'
import {
  UTable,
  UTableCell,
  UTableHeaderCell,
  UAvatarGroup,
  UBadge,
  UTableCellSupText,
  UButton,
  UPagination,
  UTableRow,
} from '../components'
import { ExtractPropTypes } from 'vue'
import { reactive } from 'vue'

const meta: Meta = {
  title: 'Example/Table',
  component: UTable,
  tags: ['autodocs'],
  argTypes: {
    //
  },
}

export default meta

type Story = StoryObj<typeof UTable>

const headerItems: any[] = [
  {
    isChecked: false,
    text: 'Name',
    prependIcon: undefined,
    appendIcon: undefined,
  },
  {
    isChecked: undefined,
    text: 'Status',
    prependIcon: undefined,
    appendIcon: '$arrowDown',
  },
  {
    isChecked: undefined,
    text: 'Role',
    prependIcon: '$helpCircle',
    appendIcon: undefined,
  },
  {
    isChecked: undefined,
    text: 'Email address',
    prependIcon: undefined,
    appendIcon: undefined,
  },
  {
    isChecked: undefined,
    text: 'Teams',
    prependIcon: undefined,
    appendIcon: undefined,
  },
  {
    isChecked: undefined,
    text: undefined,
    prependIcon: undefined,
    appendIcon: undefined,
  },
]

const coworkers: any[] = reactive([
  {
    Name: {
      profileName: 'Olivia Rhye',
      profileText: '@olivia',
      imagePath: '@/components/Table/avatars/Avatar1.svg',
      avatarNote: '',
    },
    Status: {
      status: 'Active',
      color: 'success',
    },
    Email: 'olivia@untitledui.com',
    Role: 'Product Designer',
  },
  {
    Name: {
      profileName: 'Phoenix Baker',
      profileText: '@phoenix',
      imagePath: '@/components/Table/avatars/Avatar2.svg',
      avatarNote: '',
    },
    Status: {
      status: 'Active',
      color: 'success',
    },
    Email: 'phoenix@untitledui.com',
    Role: 'Product Manager',
  },
  {
    Name: {
      profileName: 'Lana Steiner',
      profileText: '@lana',
      imagePath: '@/components/Table/avatars/Avatar3.svg',
      avatarNote: '',
    },
    Status: {
      status: 'Active',
      color: 'success',
    },
    Email: 'lana@untitledui.com',
    Role: 'Frontend Developer',
  },
  {
    Name: {
      profileName: 'Demi Wilkinson',
      profileText: '@demi',
      imagePath: '@/components/Table/avatars/Avatar4.svg',
      avatarNote: '',
    },
    Status: {
      status: 'Active',
      color: 'success',
    },
    Email: 'demi@untitledui.com',
    Role: 'Backend Developer',
  },
  {
    Name: {
      profileName: 'Candice Wu',
      profileText: '@candice',
      imagePath: '',
      avatarNote: 'CW',
    },
    Status: {
      status: 'Active',
      color: 'success',
    },
    Email: 'candice@untitledui.com',
    Role: 'Fullstack Developer',
  },
])

const badges: any[] = [
  { text: 'Design', color: 'primary', size: 'sm' },
  { text: 'Product', color: 'blue', size: 'sm' },
  { text: 'Marketing', color: 'indigo', size: 'sm' },
  { text: 'Label', color: 'indigo', size: 'sm' },
  { text: 'Label', color: 'indigo', size: 'sm' },
  { text: 'Label', color: 'indigo', size: 'sm' },
  { text: 'Label', color: 'indigo', size: 'sm' },
]

export const AlternatingFillsTable: Story = {
  render: (args: ExtractPropTypes<UTableProps>) => ({
    components: {
      UTable,
      UTableRow,
      UPagination,
      UTableCell,
      UTableHeaderCell,
      UAvatarGroup,
      UBadge,
      UTableCellSupText,
      UButton,
    },
    setup() {
      return { args, headerItems, coworkers, badges }
    },
    template: `<UTable class="overflow-hidden">
    <template #header>
      <h1 class="w-full text-center mb-3">HEADER</h1>
    </template>
    <template #tableHeader>
    <UTableRow height="44">
      <UTableHeaderCell
        v-for="(headerItem, index) in headerItems" :key="index"
        :text="headerItem.text"
        color="gray"
        align="left"
        :isChecked="headerItem.isChecked"
        :appendIcon="headerItem.appendIcon"
        :prependIcon="headerItem.prependIcon"
        :width="index === 4 ? '23%' : index === 1 ? '11%' : ''"
        @change="switchCheckbox"
      ></UTableHeaderCell>
      </UTableRow>
    </template>
    <template #tableContent>
      <UTableRow 
        v-for="(coworker, index) in coworkers"
        :divider="index % 2 !== 0 ? 'alternating fills' : 'divider line'"
        :key="index"
        @mouseenter="coworker.isHovered = true"
        @mouseleave="coworker.isHovered = false">
          <UTableCell :class="index === coworkers.length - 1 ? 'border-b border-error-600' : '' ">
            <UAvatarGroup
              :profileName="coworker.Name.profileName"
              :profileText="coworker.Name.profileText"
              :avatar-note="coworker.Name.avatarNote"
            ></UAvatarGroup>
          </UTableCell>

          <UTableCell>
            <UBadge :color="coworker.Status.color">{{ coworker.Status.status }}</UBadge>
          </UTableCell>

          <UTableCell>
            <UTableCellSupText>{{ coworker.Role }}</UTableCellSupText>
          </UTableCell>

          <UTableCell>
            <UTableCellSupText>{{ coworker.Email }}</UTableCellSupText>
          </UTableCell>

          <UTableCell :badges="badges"></UTableCell>

          <UTableCell>
            <UButton
              size="md"
              type="Secondary Gray"
              prependIcon="trash1"
            ></UButton>
            <UButton
              size="md"
              type="Secondary Gray"
              prependIcon="edit1"
            ></UButton>
          </UTableCell>
      </UTableRow>
    </template>
    <template #footer>
      <div class="py-3 px-6">
        <UPagination type="minimal" pagesCount="5"></UPagination>
      </div>
    </template>
    </UTable>`,
    methods: {
      switchCheckbox() {
        if (args.isChecked !== undefined) {
          args.isChecked = !args.isChecked
        }
      },
    },
  }),
  args: {} as UTableProps,
}