import type { Meta, StoryObj } from '@storybook/vue3'
import {
  UTableCell,
  UAvatarGroup,
  UProgressBar,
  UButton,
  UTableCellSupText,
  UTableCellText,
} from '../components'
import { UTableCellProps } from '../components/UTable/UTableCell'
import { ExtractPropTypes } from 'vue'

const meta: Meta<typeof UTableCell> = {
  title: 'Example/TableCell',
  component: UTableCell,
  tags: ['autodocs'],
  argTypes: {
    disabled: { control: 'boolean', defaultValue: false },
    badges: { table: { disable: true } },
    isChecked: { control: 'select', options: [undefined, true, false] },
    checkboxType: { control: 'select', options: ['default', 'radio'] },
    divider: {
      control: 'select',
      options: ['divider line', 'alternating fills'],
    },
  },
}

export default meta

type Story = StoryObj<typeof UTableCell>

export const TextTableCell: Story = {
  render: (args: ExtractPropTypes<UTableCellProps>) => ({
    components: { UTableCell, UTableCellSupText, UTableCellText },
    setup() {
      return { args }
    },
    template: `<UTableCell v-bind="args" v-model="args.isChecked">
      <UTableCellText>Olivia Rhye</UTableCellText>
      <UTableCellSupText>olivia@untitledui.com</UTableCellSupText>
    </UTableCell>`,
  }),
  args: {} as UTableCellProps,
}

export const BadgesTableCell: Story = {
  render: (args: ExtractPropTypes<UTableCellProps>) => ({
    components: { UTableCell },
    setup() {
      return { args }
    },
    template: `<UTableCell v-bind="args" v-model="args.isChecked"></UTableCell>`,
  }),
  args: {
    badges: [
      { text: 'Label', color: 'primary', size: 'sm' },
      { text: 'Label', color: 'blue', 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' },
      { text: 'Label', color: 'indigo', size: 'sm' },
      { text: 'Label', color: 'indigo', size: 'sm' },
    ],
  } as UTableCellProps,
}

export const AvatarTableCell: Story = {
  render: (args: ExtractPropTypes<UTableCellProps>) => ({
    components: { UTableCell, UAvatarGroup },
    setup() {
      return { args }
    },
    template: `<UTableCell v-bind="args" v-model="args.isChecked">
      <UAvatarGroup 
        profileName="Olivia Rhye" 
        avatarIcon="''"
        imagePath="https://w7.pngwing.com/pngs/129/292/png-transparent-female-avatar-girl-face-woman-user-flat-classy-users-icon.png"
        profileText="olivia@untitledui.com">
      </UAvatarGroup>
    </UTableCell>`,
  }),
  args: {
    //
  } as UTableCellProps,
}

export const ButtonTableCell: Story = {
  render: (args: ExtractPropTypes<UTableCellProps>) => ({
    components: { UTableCell, UButton },
    setup() {
      return { args }
    },
    template: `<UTableCell v-bind="args" v-model="args.isChecked">
      <UButton size="md" type="Tertiary Gray" prependIcon="copy1"></UButton>
      <UButton size="md" type="Tertiary Gray" prependIcon="downloadCloud2"></UButton>
      <UButton size="md" type="Tertiary Gray" prependIcon="trash1"></UButton>
      <UButton size="md" type="Tertiary Gray" prependIcon="edit1"></UButton>
    </UTableCell>`,
  }),
  args: {
    //
  } as UTableCellProps,
}

export const ProgressBarTableCell: Story = {
  render: (args: ExtractPropTypes<UTableCellProps>) => ({
    components: { UTableCell, UProgressBar },
    setup() {
      return { args }
    },
    template: `<UTableCell v-bind="args" v-model="args.isChecked">
      <UProgressBar progress="60" label="right" width="190"></UProgressBar>
    </UTableCell>`,
  }),
  args: {
    //
  } as UTableCellProps,
}