import Header from '@/lib/components/Header';
import { commonArgTypes, typoSizeOptions, weightOptions } from '@/lib/constants';
import { Meta, StoryObj } from '@storybook/vue3/*';

const meta = {
  title: 'Typography/Header',
  component: Header,
  parameters: {
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component:
          'Header 컴포넌트는 주로 텍스트의 제목이나 섹션의 헤더를 표시하는 데 사용됩니다. h1부터 h6까지의 태그를 사용하여 제목의 계층 구조를 나타냅니다.'
      }
    }
  },
  argTypes: {
    weight: {
      ...commonArgTypes.weight,
      description: 'Header 컴포넌트 폰트 두께'
    },
    color: {
      ...commonArgTypes.color,
      defaultValue: { summary: 'black' },
      description: 'Header 컴포넌트 폰트 색상'
    },
    size: {
      table: {
        category: 'Props',
        type: { summary: '1 ~ 9' }
      },
      options: typoSizeOptions,
      control: { type: 'select' },
      description: 'Header 컴포넌트 폰트 사이즈',
      defaultValue: { summary: '6' }
    },
    align: {
      table: {
        category: 'Props',
        type: { summary: 'left | center | right' }
      },
      options: ['left', 'center', 'right'],
      control: { type: 'select' },
      description: 'Header 컴포넌트 정렬'
    }
  }
} as Meta;

export default meta;
type Story = StoryObj<typeof meta>;
export const Default = {
  render: (args: {}) => ({
    components: {
      Header
    },
    setup() {
      return { args };
    },
    template: `<div class='flex'><Header v-bind='args' class="w-full">Header Component</Header></div>`
  })
};

export const Color = {
  render: (args: {}) => ({
    components: {
      Header
    },
    setup() {
      return { args };
    },
    template: `
    <div class="grid">
    <Header color="olive">Header Component</Header>
    <Header color="tomato">Header Component</Header>
    <Header color="indigo">Header Component</Header>
    <Header color="yellow">Header Component</Header>
    </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
        <div class="grid">
          <Header color="olive">Header Component</Header>
          <Header color="tomato">Header Component</Header>
          <Header color="indigo">Header Component</Header>
          <Header color="yellow">Header Component</Header>
        </div>
        `
      }
    }
  }
};

export const Weight = {
  render: (args: {}) => ({
    components: {
      Header
    },
    setup() {
      return { args };
    },
    template: `
    <div class="grid">
    <Header weight="regular">Header Component</Header>
    <Header weight="medium">Header Component</Header>
    <Header weight="semibold">Header Component</Header>
    <Header weight="bold">Header Component</Header>
    </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
    <div class="grid">
      <Header weight="regular">Header Component</Header>
      <Header weight="medium">Header Component</Header>
      <Header weight="semibold">Header Component</Header>
      <Header weight="bold">Header Component</Header>
    </div>
        `
      }
    }
  }
};

export const Size = {
  render: (args: {}) => ({
    components: {
      Header
    },
    setup() {
      return { args };
    },
    template: `
    <div class="grid">
    <Header size="1">Header Component</Header>
    <Header size="2">Header Component</Header>
    <Header size="3">Header Component</Header>
    <Header size="4">Header Component</Header>
    <Header size="5">Header Component</Header>
    <Header size="6">Header Component</Header>
    <Header size="7">Header Component</Header>
    <Header size="8">Header Component</Header>
    <Header size="9">Header Component</Header>
    </div>
    `
  }),

  parameters: {
    docs: {
      source: {
        code: `
        <div class="grid">
          <Header color="olive">Header Component</Header>
          <Header color="tomato">Header Component</Header>
          <Header color="indigo">Header Component</Header>
          <Header color="yellow">Header Component</Header>
        </div>
        `
      }
    }
  }
};

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

  parameters: {
    docs: {
      source: {
        code: `
    <div class="grid">
    <Header align="left">Header Component</Header>
    <Header align="center">Header Component</Header>
    <Header align="right">Header Component</Header>
    </div>
        `
      }
    }
  }
};