import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'

import type { CpTextSize, CpTextWeight } from '@/components/CpText.vue'

import CpText from '@/components/CpText.vue'

import { docLabelStyle } from '@/stories/documentationStyles'

const textSizes = [
  'xs',
  'sm',
  'md',
  'lg',
  'xl',
  '2xl',
  '3xl',
  '4xl',
  '5xl',
  '6xl',
  '7xl',
  '8xl',
  '9xl',
] as const satisfies readonly CpTextSize[]

const weights = [400, 500, 600, 700] as const satisfies readonly CpTextWeight[]

const rowStyle = 'display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center;'

const sizesRowStyle = 'display: flex; align-items: center; gap: 16px; width: max-content;'

const meta = {
  title: 'Atoms/CpText',
  component: CpText,
  parameters: {
    docs: {
      description: {
        component:
          'Typography primitive for body and UI copy. Pairs each `size` with the matching `--cp-text-size-*` and `--cp-line-height-*` design tokens. Override the root element with `tag` (defaults to `p`).',
      },
    },
  },
  argTypes: {
    tag: {
      control: 'text',
      description: 'Root HTML tag (default: `p`).',
    },
    size: {
      control: 'select',
      options: textSizes,
      description: 'Scale step from `xs` through `9xl`; maps to typography CSS variables.',
    },
    weight: {
      control: 'select',
      options: [undefined, ...weights],
      description: 'Font weight from 400 to 700.',
    },
  },
} satisfies Meta<typeof CpText>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    size: 'md',
  },
  render: (args: Args) => ({
    components: { CpText },
    setup() {
      return { args }
    },
    template: `
      <div style="padding: 20px;">
        <CpText v-bind="args">Body text using the size and line-height tokens.</CpText>
      </div>
    `,
  }),
}

export const Sizes: Story = {
  parameters: { controls: { disable: true }, layout: 'padded' },
  render: () => ({
    components: { CpText },
    setup() {
      return { textSizes, sizesRowStyle, docLabelStyle }
    },
    template: `
      <div style="display: flex; flex-direction: column; gap: 12px; overflow-x: auto; max-width: 100%;">
        <div v-for="size in textSizes" :key="size" :style="sizesRowStyle">
          <span :style="docLabelStyle + ' flex: 0 0 56px;'">{{ size }}</span>
          <CpText :size="size" style="white-space: nowrap;">A design system offers guidelines and components for consistent visuals and better user experience.</CpText>
        </div>
      </div>
    `,
  }),
}

export const Weights: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpText },
    setup() {
      return { weights, rowStyle, docLabelStyle }
    },
    template: `
      <div style="padding: 20px; display: flex; flex-direction: column; gap: 12px;">
        <div v-for="w in weights" :key="w" :style="rowStyle">
          <span :style="docLabelStyle">{{ w }}</span>
          <CpText :weight="w">Create a harmonious user experience</CpText>
        </div>
      </div>
    `,
  }),
}

export const CustomTag: Story = {
  args: {
    tag: 'span',
    size: 'sm',
  },
  render: (args: Args) => ({
    components: { CpText },
    setup() {
      return { args }
    },
    template: `
      <div style="padding: 20px;">
        <p>Inline text: <CpText v-bind="args">styled snippet</CpText> inside a paragraph.</p>
      </div>
    `,
  }),
}