import type { Meta, StoryObj } from '@storybook/vue3'
import { UIcon } from '../components'
import { aliases } from '../iconsets/mdi-svg'
import getFormattedColors from '../utils/getFormattedColors'
import ColorName from '../types/colors'
import { UIconProps } from '../components/UIcon/UIcon'
import { ExtractPropTypes } from 'vue'
import { IconValue } from '../composables/icons'
import colors from '../assets/colors'

const meta: Meta<typeof UIcon> = {
  title: 'Example/Icon',
  component: UIcon,
  tags: ['autodocs'],
  argTypes: {
    icon: {
      control: 'select',
      options: Object.keys(aliases).map((value) => `$${value}`),
    },
    color: { control: 'select', options: getFormattedColors(colors) },
    hover: { table: { disable: true } },
    active: { table: { disable: true } },
  },
}

export default meta

type Story = StoryObj<typeof UIcon>

export const BaseIcon: Story = {
  render: (args: ExtractPropTypes<UIconProps>) => ({
    components: { UIcon },
    setup() {
      args.icon = `$${args.icon}`
      return { args }
    },
    template:
      '<UIcon v-bind="args" class="mt-10 mb-10 mx-auto"> {{ args.icon }} </UIcon>',
  }),
  args: {
    color: 'error-600' as ColorName,
    icon: 'activity' as IconValue,
  } as UIconProps,
}

export const LightCircleIcon: Story = {
  render: (args: ExtractPropTypes<UIconProps>) => ({
    components: { UIcon },
    setup() {
      args.icon = `$${args.icon}`
      return { args }
    },
    template:
      '<UIcon v-bind="args" class="mt-10 mb-10 mx-auto"> {{ args.icon }} </UIcon>',
  }),
  args: {
    color: 'error-600' as ColorName,
    icon: 'activity' as IconValue,
    size: 'xs',
    variant: 'lightCircle',
  } as UIconProps,
}

export const LightCircleOutlineIcon: Story = {
  render: (args: ExtractPropTypes<UIconProps>) => ({
    components: { UIcon },
    setup() {
      args.icon = `$${args.icon}`
      return { args }
    },
    template:
      '<UIcon v-bind="args" class="mt-10 mb-10 mx-auto"> {{ args.icon }} </UIcon>',
  }),
  args: {
    color: 'error-600' as ColorName,
    icon: 'activity' as IconValue,
    size: '20',
    variant: 'lightCircleOutline',
  } as UIconProps,
}

export const DarkCircle: Story = {
  render: (args: ExtractPropTypes<UIconProps>) => ({
    components: { UIcon },
    setup() {
      args.icon = `$${args.icon}`
      return { args }
    },
    template:
      '<UIcon v-bind="args" class="mt-10 mb-10 mx-auto"> {{ args.icon }} </UIcon>',
  }),
  args: {
    color: 'error-600' as ColorName,
    icon: 'activity' as IconValue,
    size: 'md',
    variant: 'darkCircle',
  } as UIconProps,
}

export const LightSquare: Story = {
  render: (args: ExtractPropTypes<UIconProps>) => ({
    components: { UIcon },
    setup() {
      args.icon = `$${args.icon}`
      return { args }
    },
    template:
      '<UIcon v-bind="args" class="mt-10 mb-10 mx-auto"> {{ args.icon }} </UIcon>',
  }),
  args: {
    color: 'error-600' as ColorName,
    icon: 'activity' as IconValue,
    size: 'lg',
    variant: 'lightSquare',
  } as UIconProps,
}

export const MidSquare: Story = {
  render: (args: ExtractPropTypes<UIconProps>) => ({
    components: { UIcon },
    setup() {
      args.icon = `$${args.icon}`
      return { args }
    },
    template:
      '<UIcon v-bind="args" class="mt-10 mb-10 mx-auto"> {{ args.icon }} </UIcon>',
  }),
  args: {
    color: 'error-600' as ColorName,
    icon: 'activity' as IconValue,
    size: 'xl',
    variant: 'midSquare',
  } as UIconProps,
}

export const DarkSquare: Story = {
  render: (args: ExtractPropTypes<UIconProps>) => ({
    components: { UIcon },
    setup() {
      args.icon = `$${args.icon}`
      return { args }
    },
    template:
      '<UIcon v-bind="args" class="mt-10 mb-10 mx-auto"> {{ args.icon }} </UIcon>',
  }),
  args: {
    color: 'error-600' as ColorName,
    icon: 'activity' as IconValue,
    size: 'xxl',
    variant: 'darkSquare',
  } as UIconProps,
}