import { tokens, type TokenValue } from '../../theme/tokens/tokens'
import { viewports } from '../../utils/viewports'
import { Typography } from '../Typography'

export default {
  title: 'Theme/Tokens',
  tags: ['!manifest'],
  parameters: {
    viewports: viewports.XL,
  },
}

export const SemanticTokens = () => (
  <div className="h-[600px] max-w-4xl overflow-y-auto p-4">
    {Object.entries(tokens).map(([categoryName, categoryTokens]) => (
      <div key={categoryName} className="mb-10 w-[500px]">
        <h3 className="mb-5 text-lg font-semibold">{categoryName}</h3>
        <div className="grid grid-cols-1 gap-4">
          {Object.entries(categoryTokens as Record<string, TokenValue>).map(
            ([tokenName, tokenValues]) => {
              const cssVariable = `--${tokenName}`
              // Strip var() wrapper to show just --token-name
              const formatValue = (val: string) =>
                val.replace(/^var\((.+)\)$/, '$1')

              return (
                <div
                  key={tokenName}
                  className="flex flex-col rounded-md border border-solid border-border bg-background p-4"
                >
                  <div className="mb-3 flex items-center justify-between">
                    <Typography variant="body-l" className="font-medium">
                      {cssVariable}
                    </Typography>
                  </div>

                  <div className="grid grid-cols-2 gap-4">
                    <div className="flex flex-col gap-2">
                      <Typography
                        variant="body-xs"
                        className="text-muted-foreground"
                      >
                        Light
                      </Typography>
                      <div className="flex items-center gap-2">
                        <div
                          className="h-8 w-8 flex-shrink-0 rounded-sm border border-solid border-gray-200"
                          style={{
                            backgroundColor: `var(${cssVariable})`,
                          }}
                        />
                        <Typography variant="body-s" className="truncate">
                          {formatValue(tokenValues.light)}
                        </Typography>
                      </div>
                    </div>

                    <div className="flex flex-col gap-2">
                      <Typography
                        variant="body-xs"
                        className="text-muted-foreground"
                      >
                        Dark
                      </Typography>
                      <div className="flex items-center gap-2">
                        <div
                          className="dark h-8 w-8 flex-shrink-0 rounded-sm border border-solid border-gray-200"
                          style={{
                            backgroundColor: `var(${cssVariable})`,
                          }}
                        />
                        <Typography variant="body-s" className="truncate">
                          {formatValue(tokenValues.dark)}
                        </Typography>
                      </div>
                    </div>
                  </div>
                </div>
              )
            },
          )}
        </div>
      </div>
    ))}
  </div>
)