import Slider from '@/lib/components/Slider';
import { commonArgTypes, radiusOptions } from '@/lib/constants';
import { Meta } from '@storybook/vue3/*';

const meta = {
  title: 'Input Component/Slider',
  component: Slider,
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: '시각적, 의미적으로 콘텐츠를 구분하는 선'
      }
    }
  },
  argTypes: {
    scaling: {
      ...commonArgTypes.scaling,
      description: 'Slider component 크기'
    },
    radius: {
      ...commonArgTypes.radius,
      description: 'Slider Bar 둥글기'
    },
    color: {
      ...commonArgTypes.color,
      defaultValue: { summary: 'slate' },
      description: 'Slider component 색상'
    },
    size: {
      table: {
        category: 'Props',
        type: { summary: ['small', 'medium', 'large'].join(' | ') }
      },
      control: { type: 'select' },
      options: ['small', 'medium', 'large'],
      defaultValue: { summary: 'medium' },
      description: 'Separator component 크기'
    },
    appearance: {
      table: {
        category: 'Props',
        type: { summary: ['classic', 'soft', 'surface'].join(' | ') }
      },
      control: { type: 'select' },
      defaultValue: { summary: 'surface' },
      description: 'Slider 스타일',
      options: ['classic', 'soft', 'surface']
    }
  }
} as Meta;

export const Default = {
  render: (args: any) => ({
    components: {
      Slider
    },
    setup() {
      return { args };
    },
    template: `
    <Slider v-bind="args" />
    `
  })
};
export default meta;

export const Radius = {
  render: (args: any) => ({
    components: {
      Slider
    },
    setup() {
      return { args, radiusOptions };
    },
    template: `
    <template 
      v-for="radius in radiusOptions"
      :key="radius">
    <Slider v-bind="args" :radius="radius"
      class="flex gap-3 items-center mb-5"/>
    </template>
    `
  })
};
export const Size = {
  render: (args: any) => ({
    components: {
      Slider
    },
    setup() {
      const sizeOptions = ['small', 'medium', 'large'];
      return { args, sizeOptions };
    },
    template: `
    <template 
      v-for="size in sizeOptions"
      :key="size"
      >
    <Slider v-bind="args" :size="size" 
      class="flex gap-3 items-center mb-5"/>
    </template>
    `
  })
};