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

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

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

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

export default meta

type Story = StoryObj

const previewStyle = (tokenName: string): string =>
  `width: 160px; height: 80px; background: #ffffff; border-radius: 8px; box-shadow: var(${tokenName});`

const makeSectionStory = (loader: () => Token[]): Story => ({
  render: () => ({
    setup() {
      const { copiedKey, copy } = useCopier()
      return {
        tokens: loader(),
        copiedKey,
        copy,
        tableClass: tokenTableClass,
        copyClass: copyableClass,
        copiedClass: copyableCopiedClass,
        preview: (tokenName: string) => previewStyle(tokenName),
      }
    },
    template: `
      <table v-if="tokens.length > 0" :class="tableClass">
        <thead>
          <tr>
            <th scope="col">Token</th>
            <th scope="col">Value</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>{{ token.value }}</td>
            <td class="cp-token-table__preview">
              <div :style="preview(token.name)"></div>
            </td>
          </tr>
        </tbody>
      </table>
      <div v-else style="padding: 12px 0; color: #9ca3af; font-size: 12px;">No tokens</div>
    `,
  }),
})

/**
 * Drop shadows ordered from the most to the least prominent. Use them to
 * lift cards, popovers and menus off the surface.
 */
export const DropShadows: Story = makeSectionStory(() =>
  sortTokensBySize(readTokens(['--cp-shadows-'], [/-inset$/, /^--cp-shadows-overlay$/, /^--cp-shadows-side-panel$/])),
)

/**
 * Inset shadows sit inside the element. Useful for pressed states and
 * recessed surfaces like form fields.
 */
export const InsetShadows: Story = makeSectionStory(() => sortTokensBySize(readTokens([/^--cp-shadows-.*-inset$/])))

/**
 * Dedicated shadow for the side panel container.
 */
export const SidePanel: Story = makeSectionStory(() => readTokens(['--cp-shadows-side-panel']))

/**
 * Multi-layered shadow used for modals and full-screen overlays.
 */
export const Overlay: Story = makeSectionStory(() => readTokens(['--cp-shadows-overlay']))