import Label from '@/lib/components/Label';
import { colorOptions } from '@/lib/color/constants';
import { commonArgTypes, scalingOptions, weightOptions } from '@/lib/constants';
import type { Meta } from '@storybook/vue3';

const meta = {
  title: 'Basic Component/Label',
  component: Label,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: '컴포넌트 및 컨트롤 요소의 사용 목적을 알리기 위해 사용되는 설명적 텍스트'
      }
    }
  },
  argTypes: {
    scaling: {
      ...commonArgTypes.scaling,
      description: '라벨 크기'
    },
    weight: {
      table: {
        category: 'Props',
        type: { summary: weightOptions.join(' | ') }
      },
      control: { type: 'select' },
      options: weightOptions,
      defaultValue: { summary: 'regular' },
      description: '라벨 폰트 두께'
    },
    color: {
      table: {
        category: 'Theme Props',
        type: { summary: 'colorVariants' }
      },
      options: colorOptions,
      control: { type: 'select' },
      description: '라벨 색상'
    },
    size: {
      table: {
        category: 'Props',
        type: { summary: ['small', 'medium', 'large'].join(' | ') }
      },
      control: { type: 'select' },
      options: ['small', 'medium', 'large'],
      defaultValue: { summary: 'medium' },
      description: '라벨 크기'
    },
    required: {
      table: {
        category: 'Props',
        type: { summary: 'boolean' }
      },
      control: { type: 'boolean' },
      defaultValue: { summary: false },
      description: '라벨 필수값 표시 여부 (*)'
    },
    asteriskPosition: {
      table: {
        category: 'Props',
        type: { summary: ['left', 'right'].join(' | ') }
      },
      control: { type: 'select' },
      options: ['left', 'right'],
      defaultValue: { summary: 'left' },
      description: '필수값 표시 (*) 위치'
    }
  }
} as Meta;

export default meta;

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

export const Scaling = {
  render: () => ({
    components: {
      Label
    },
    setup() {
      return { scalingOptions };
    },
    template: `
    <template
      v-for="scaling in scalingOptions"
      :key="scaling"
    >
      <Label :scaling="scaling" >First name</Label>
    </template>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
    <template>
      <Label scaling="90%" >First name</Label>
      <Label scaling="95%" >First name</Label>
      <Label scaling="100%" >First name</Label>
      <Label scaling="105%" >First name</Label>
      <Label scaling="110%" >First name</Label>
    </template>
        `
      }
    }
  }
};

export const Weight = {
  render: () => ({
    components: {
      Label
    },
    setup() {
      return { weightOptions };
    },
    template: `
    <template
      v-for="weight in weightOptions"
      :key="weight"
    >
      <Label :weight="weight" >First name</Label>
    </template>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
    <template>
        <Label weight="regular">First name</Label>
        <Label weight="medium">First name</Label>
        <Label weight="semibold">First name</Label>
        <Label weight="bold">First name</Label>
    </template>
        `
      }
    }
  }
};

export const Size = {
  render: () => ({
    components: {
      Label
    },
    setup() {
      return { sizeOptions: ['small', 'medium', 'large'] };
    },
    template: `
    <template
      v-for="size in sizeOptions"
      :key="size"
    >
      <Label :size="size" >First name</Label>
    </template>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
    <template>
      <Label size="small" >First name</Label>
      <Label size="medium" >First name</Label>
      <Label size="large" >First name</Label>
    </template>
        `
      }
    }
  }
};