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

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

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

const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const
const headingSizes = [100, 200, 300, 400, 500, 600, 700, 800, 900] as const

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

const meta = {
  title: 'Atoms/CpHeading',
  component: CpHeading,
  tags: ['deprecated'],
  parameters: {
    docs: {
      description: {
        component: '> ⚠️ **Deprecated.** `CpHeading` is kept for backwards compatibility only. Use CpText instead.',
      },
    },
  },
  argTypes: {
    headingLevel: {
      control: 'select',
      options: headingLevels,
      description: 'HTML heading level',
    },
    size: {
      control: 'select',
      options: headingSizes,
      description: 'Size variant of the heading',
    },
  },
} satisfies Meta<typeof CpHeading>

export default meta

type Story = StoryObj<typeof meta>

/**
 * @deprecated Default heading. Prefer native `<h1>`–`<h6>` styled with typography CSS variables.
 */
export const Default: Story = {
  args: {
    headingLevel: 'h1',
    size: 500,
  },
  render: (args: Args) => ({
    components: { CpHeading },
    setup() {
      return { args }
    },
    template: `
      <div style="padding: 20px;">
        <CpHeading v-bind="args">Default Heading</CpHeading>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Sizes                                                                      */
/* -------------------------------------------------------------------------- */

/**
 * @deprecated All sizes stacked from `100` (smallest) to `900` (largest). The
 * visual size is decoupled from the semantic HTML level.
 */
export const Sizes: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpHeading },
    setup() {
      return {
        headingSizes,
        headingRowStyle,
        docLabelStyle,
      }
    },
    template: `
      <div style="padding: 20px; display: flex; flex-direction: column; gap: 16px;">
        <div v-for="size in headingSizes" :key="size" :style="headingRowStyle">
          <span :style="docLabelStyle">{{ size }}</span>
          <CpHeading :size="size">Size {{ size }} Heading</CpHeading>
        </div>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Semantic level                                                             */
/* -------------------------------------------------------------------------- */

/**
 * @deprecated The recommended pairing between semantic HTML level and visual
 * size — but any combination is valid. Picking the right `headingLevel`
 * matters for accessibility and document outline, while `size` controls the
 * look.
 */
export const LevelAndSizePairing: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpHeading },
    template: `
      <div style="padding: 20px; display: flex; flex-direction: column; gap: 16px;">
        <CpHeading heading-level="h1" size="900">H1 with Size 900</CpHeading>
        <CpHeading heading-level="h2" size="800">H2 with Size 800</CpHeading>
        <CpHeading heading-level="h3" size="700">H3 with Size 700</CpHeading>
        <CpHeading heading-level="h4" size="600">H4 with Size 600</CpHeading>
        <CpHeading heading-level="h5" size="500">H5 with Size 500</CpHeading>
        <CpHeading heading-level="h6" size="400">H6 with Size 400</CpHeading>
      </div>
    `,
  }),
}