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

import type { Token } from '@/stories/tokenUtils'

import {
  copyableClass,
  copyableCopiedClass,
  readTokens,
  sortTokensBySize,
  splitRemPx,
  tokenTableClass,
  useCopier,
} from '@/stories/tokenUtils'

const meta: Meta = {
  title: 'Foundations/Dimensions',
  tags: ['!dev'],
  parameters: {
    layout: 'padded',
    controls: { disable: true },
    docs: { source: { code: null } },
  },
}

export default meta

type Story = StoryObj

type DimensionKind = 'bar' | 'none' | 'radius' | 'square'

const previewStyle = (kind: DimensionKind, tokenName: string): string => {
  const ref = `var(${tokenName})`
  switch (kind) {
    case 'bar':
      return `height: 12px; width: ${ref}; max-width: 100%; background: var(--cp-background-accent-solid, #603dfd); border-radius: 4px;`
    case 'radius':
      return `width: 56px; height: 56px; background: var(--cp-background-accent-primary, #eaecff); border: 1px solid var(--cp-border-accent-primary, #ccd0ff); border-radius: ${ref};`
    case 'square':
      return `width: ${ref}; height: ${ref}; background: var(--cp-background-accent-solid, #603dfd); border-radius: 2px;`
    case 'none':
      return ''
  }
}

type SectionArgs = { kind: DimensionKind; prefix: string }

const makeSectionStory = (section: SectionArgs): Story => ({
  render: () => ({
    setup() {
      const tokens = sortTokensBySize(readTokens([section.prefix]))
      const { copiedKey, copy } = useCopier()
      return {
        kind: section.kind,
        tokens,
        copiedKey,
        copy,
        tableClass: tokenTableClass,
        copyClass: copyableClass,
        copiedClass: copyableCopiedClass,
        preview: (kind: DimensionKind, tokenName: string) => previewStyle(kind, tokenName),
        split: (token: Token) => splitRemPx(token),
      }
    },
    template: `
      <table v-if="tokens.length > 0" :class="tableClass">
        <thead>
          <tr>
            <th scope="col">Token</th>
            <th scope="col">rem</th>
            <th scope="col">px</th>
            <th scope="col">Preview</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="token in tokens" :key="token.name">
            <td>
              <span
                :class="[copyClass, copiedKey === token.name ? copiedClass : '']"
                role="button"
                tabindex="0"
                :title="'Click to copy ' + token.name"
                @click="copy(token.name)"
                @keydown.enter.prevent="copy(token.name)"
                @keydown.space.prevent="copy(token.name)"
              >{{ copiedKey === token.name ? 'Copied!' : token.name }}</span>
            </td>
            <td>{{ split(token).rem }}</td>
            <td>{{ split(token).px }}</td>
            <td class="cp-token-table__preview">
              <div :style="preview(kind, token.name)"></div>
            </td>
          </tr>
        </tbody>
      </table>
      <div v-else style="padding: 12px 0; color: #9ca3af; font-size: 12px;">No tokens</div>
    `,
  }),
})

/**
 * Responsive breakpoints. These values match the `min-width` media queries
 * the design system uses to adapt layouts.
 */
export const Breakpoint: Story = makeSectionStory({ prefix: '--cp-breakpoint-', kind: 'none' })

/**
 * Border radius scale, from sharp corners to fully rounded pill shapes.
 */
export const Radius: Story = makeSectionStory({ prefix: '--cp-radius-', kind: 'radius' })

/**
 * Spacing scale used for padding, margin and gap. Rendered as horizontal
 * bars to compare relative widths.
 */
export const Spacing: Story = makeSectionStory({ prefix: '--cp-spacing-', kind: 'bar' })

/**
 * Width tokens used for icons, avatars and small fixed-size surfaces.
 */
export const Width: Story = makeSectionStory({ prefix: '--cp-width-', kind: 'square' })