import { commonArgTypes, weightOptions, typoSizeOptions } from '@/lib/constants';
import type { Meta } from '@storybook/vue3';
import { type IWeight } from '@/lib/types';
import Text from '@/lib/components/Text';

type ITextWeight = IWeight | 'light';
const textWeightOption: ITextWeight[] = ['light', ...weightOptions];

const meta = {
  title: 'Typography/Text',
  component: Text,
  parameters: {
    themes: {
      themeOverride: 'dark'
    }
  },
  argTypes: {
    size: {
      ...commonArgTypes.typoSize,
      description: '폰트 크기'
    },
    weight: {
      table: {
        category: 'Theme Props',
        type: { summary: textWeightOption.join(' | ') }
      },
      options: textWeightOption,
      control: { type: 'select' },
      defaultValue: { summary: 'medium' },
      description: '폰트 두께'
    },
    color: {
      ...commonArgTypes.color,
      description: '폰트 색상',
      defaultValue: { summary: 'black' }
    },
    default: { table: { disable: true } }
  }
} as Meta;
export default meta;

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

export const Weight = {
  render: () => ({
    components: {
      Text
    },
    setup() {
      return { weightOptions };
    },
    template: `
    <div class="flex items-center space-x-4">
      <template
        v-for="weight in weightOptions"
        :key="weight"
      >
        <Text :weight="weight" >Text Component</Text>
      </template>
    </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Text :weight="light">Text Component</Text>
  <Text :weight="regular">Text Component</Text>
  <Text :weight="medium">Text Component</Text>
  <Text :weight="semibold">Text Component</Text>
  <Text :weight="bold">Text Component</Text>
</template>
        `
      }
    }
  }
};

export const Color = {
  render: () => ({
    components: {
      Text
    },
    setup() {
      return { colorOptions: ['blue', 'crimson', 'teal', 'orange', 'purple', 'amber'] };
    },
    template: `
     <div class="flex items-center space-x-4">
      <template
        v-for="color in colorOptions"
        :key="color"
      >
        <Text :color="color" >Text Component</Text>
      </template>
    </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Text :color="blue">Text Component</Text>
  <Text :color="crimson">Text Component</Text>
  <Text :color="teal">Text Component</Text>
  <Text :color="orange">Text Component</Text>
  <Text :color="purple">Text Component</Text>
  <Text :color="amber">Text Component</Text>
</template>
        `
      }
    }
  }
};

export const Size = {
  render: () => ({
    components: {
      Text
    },
    setup() {
      return { typoSizeOptions };
    },
    template: `
     <div class="grid">
      <template
        v-for="size in typoSizeOptions"
        :key="size"
      >
        <Text :size="size" >Text Component</Text>
      </template>
    </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<div class="grid">
  <template v-for="size in ['1', '2', '3', '4', '5', '6', '7', '8', '9']" :key="size">
    <Text :size="size" >Text Component</Text>
  </template>
</div>
        `
      }
    }
  }
};

export const Align = {
  render: (args: {}) => ({
    components: {
      Text
    },
    setup() {
      return { args };
    },
    template: `
    <div class="grid">
      <Text align="left">Text Component</Text>
      <Text align="center">Text Component</Text>
      <Text align="right">Text Component</Text>
    </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<div class="grid">
  <template>
    <Text align="left">Text Component</Text>
    <Text align="center">Text Component</Text>
    <Text align="right">Text Component</Text>
  </template>
</div>  
        `
      }
    }
  }
};