import Badge from '@/lib/components/Badge';
import {
  appearanceOptions,
  commonArgTypes,
  radiusOptions,
  scalingOptions,
  sizeOptions,
  weightOptions
} from '@/lib/constants';
import type { Meta } from '@storybook/vue3';

const meta = {
  title: 'Basic Component/Badge',
  component: Badge,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          '빠른 인지와 탐색을 돕기 위해 컴포넌트 근처에 표시되는 작은 문자 또는 숫자 데이터'
      }
    }
  },
  argTypes: {
    radius: {
      ...commonArgTypes.radius,
      description: 'Badge 둥굴기'
    },
    size: {
      ...commonArgTypes.size,
      table: {
        category: 'Props',
        type: {
          summary: sizeOptions
            .filter((option) => option !== 'x-small' && option !== 'x-large')
            .join(' | ')
        }
      },
      options: sizeOptions.filter((option) => option !== 'x-small' && option !== 'x-large'),
      description: 'Badge 크기'
    },
    scaling: {
      ...commonArgTypes.scaling,
      description: 'Badge 비율'
    },
    weight: {
      ...commonArgTypes.weight,
      description: 'Badge 폰트 두께'
    },
    color: {
      ...commonArgTypes.color,
      description: 'Badge 매인색'
    },
    appearance: {
      ...commonArgTypes.appearance,
      table: {
        category: 'Props',
        type: {
          summary: appearanceOptions
            .filter((option) => option !== 'classic' && option !== 'ghost')
            .join(' | ')
        }
      },
      description: 'Badge 스타일',
      options: appearanceOptions.filter((option) => option !== 'classic' && option !== 'ghost')
    }
  },
  args: {}
} as Meta;

export default meta;

export const Default = {
  render: (args: any) => ({
    components: {
      Badge
    },
    setup() {
      return { args };
    },
    template: `<Badge v-bind='args'>badge</Badge>`
  })
};

export const Radius = {
  render: (args: any) => ({
    components: {
      Badge
    },
    setup() {
      return { args, radiusOptions };
    },
    template: `
      <div className="flex items-center gap-5">
        <template
          v-for="radius in radiusOptions" :key="radius">
          <Badge :radius='radius'>{{ radius }}</Badge>
        </template>
      </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Badge :radius="none">none</Badge>
  <Badge :radius="small">small</Badge>
  <Badge :radius="medium">medium</Badge>
  <Badge :radius="large">large</Badge>
  <Badge :radius="full">full</Badge>
</template>
        `
      }
    }
  }
};

export const Scaling = {
  render: (args: any) => ({
    components: {
      Badge
    },
    setup() {
      return { args, scalingOptions };
    },
    template: `
      <div className="flex items-center gap-5">
        <template
          v-for="scaling in scalingOptions" :key="scaling">
          <Badge :scaling='scaling'>{{ scaling }}</Badge>
        </template>
      </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Badge :scaling="90%">90%</Badge>
  <Badge :scaling="95%">95%</Badge>
  <Badge :scaling="100%">100%</Badge>
  <Badge :scaling="105%">105%</Badge>
  <Badge :scaling="110%">110%</Badge>
</template>
        `
      }
    }
  }
};

export const Weight = {
  render: (args: any) => ({
    components: {
      Badge
    },
    setup() {
      return { args, weightOptions };
    },
    template: `
      <div className="flex items-center gap-5">
        <template
          v-for="weight in weightOptions" :key="weight">
          <Badge :weight='weight'>{{ weight }}</Badge>
        </template>
      </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Badge :weight="regular">regular</Badge>
  <Badge :weight="medium">medium</Badge>
  <Badge :weight="semibold">semibold</Badge>
  <Badge :weight="bold">bold</Badge>
</template>
        `
      }
    }
  }
};

export const Size = {
  render: (args: any) => ({
    components: {
      Badge
    },
    setup() {
      return { args, sizeOptions: ['small', 'medium', 'large'] };
    },
    template: `
      <div class="flex items-center gap-5">
        <template v-for="size in sizeOptions" :key="size">
          <Badge :size="size">{{ size }}</Badge>
        </template>
      </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Badge :size="small">small</Badge>
  <Badge :size="medium">medium</Badge>
  <Badge :size="large">large</Badge>
</template>
        `
      }
    }
  }
};

export const Color = {
  render: (args: any) => ({
    components: {
      Badge
    },
    setup() {
      return { args, colorOptions: ['yellow', 'blue', 'green', 'purple'] };
    },
    template: `
      <div class="flex items-center gap-5">
        <template v-for="color in colorOptions" :key="color">
          <Badge :color="color">{{ color }}</Badge>
        </template>
      </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Badge :color="yellow">yellow</Badge>
  <Badge :color="blue">blue</Badge>
  <Badge :color="green">green</Badge>
  <Badge :color="purple">purple</Badge>
</template>
        `
      }
    }
  }
};

export const Appearance = {
  render: (args: any) => ({
    components: {
      Badge
    },
    setup() {
      return { args, appearanceOptions: ['solid', 'soft', 'surface', 'outline'] };
    },
    template: `
      <div class="flex items-center gap-5">
        <template v-for="appearance in appearanceOptions" :key="appearance">
          <Badge :appearance="appearance">{{ appearance }}</Badge>
        </template>
      </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Badge :appearance="solid">solid</Badge>
  <Badge :appearance="soft">soft</Badge>
  <Badge :appearance="surface">surface</Badge>
  <Badge :appearance="outline">outline</Badge>
</template>
        `
      }
    }
  }
};