import type { Meta, StoryObj } from '@storybook/vue3-vite'

import CpLoader from '@/components/CpLoader.vue'

import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'

const loaderSizes = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const
const loaderColors = ['neutral', 'accent', 'error', 'warning', 'success'] as const

const meta = {
  title: 'Atoms/CpLoader',
  component: CpLoader,
  argTypes: {
    size: {
      control: 'select',
      options: loaderSizes,
      description: 'Size of the loader in pixels',
    },
    color: {
      control: 'select',
      options: loaderColors,
      description: 'The color variant of the loader',
    },
    duration: {
      control: 'number',
      description: 'The duration of the loader in ms (700ms by default)',
    },
  },
} satisfies Meta<typeof CpLoader>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default loader. Use the controls to experiment with each prop in isolation.
 */
export const Default: Story = {
  args: { color: 'neutral' },
}

/**
 * Every size rendered side by side.
 */
export const Sizes: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpLoader },
    setup() {
      return { loaderSizes, docCellStyle, docLabelStyle, docRowWrapStyle }
    },
    template: `
      <div :style="docRowWrapStyle">
        <div v-for="size in loaderSizes" :key="size" :style="docCellStyle">
          <span :style="docLabelStyle">{{ size }}</span>
          <CpLoader :size="size" color="accent" />
        </div>
      </div>
    `,
  }),
}

/**
 * All semantic colors rendered side by side.
 */
export const Colors: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpLoader },
    setup() {
      return { loaderColors, docCellStyle, docLabelStyle, docRowWrapStyle }
    },
    template: `
      <div :style="docRowWrapStyle">
        <div v-for="color in loaderColors" :key="color" :style="docCellStyle">
          <span :style="docLabelStyle">{{ color }}</span>
          <CpLoader :color="color" size="lg" />
        </div>
      </div>
    `,
  }),
}