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

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

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

export default meta

type Story = StoryObj

export const Curves: Story = {
  render: () => ({
    setup() {
      const easings = readTokens(['--cp-easing-'])
      const { copiedKey, copy } = useCopier()
      return {
        easings,
        copiedKey,
        copy,
        tableClass: tokenTableClass,
        copyClass: copyableClass,
        copiedClass: copyableCopiedClass,
        ballStyle: (tokenName: string) => `transition-timing-function: var(${tokenName});`,
      }
    },
    template: `
      <div>
        <style>
          .cp-easing-track {
            position: relative;
            width: 220px;
            height: 36px;
            background: #f3f4f6;
            border-radius: 18px;
            overflow: hidden;
          }
          .cp-easing-ball {
            position: absolute;
            top: 4px;
            left: 4px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--cp-background-accent-solid, #603dfd);
            transition-property: transform;
            transition-duration: 900ms;
            transform: translateX(0);
          }
          .cp-easing-track:hover .cp-easing-ball,
          .cp-easing-track:focus-within .cp-easing-ball {
            transform: translateX(184px);
          }
        </style>
        <p style="margin: 0 0 12px 0; color: #6b7280; font-size: 12px;">Hover a track to play the transition.</p>
        <table v-if="easings.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 easings" :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 class="cp-easing-track" tabindex="0">
                  <div class="cp-easing-ball" :style="ballStyle(token.name)"></div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div v-else style="padding: 12px 0; color: #9ca3af; font-size: 12px;">No tokens</div>
      </div>
    `,
  }),
}