import { colors } from '../../theme/colors/colors'
import { cn } from '../../utils/cn'
import { Typography } from '../Typography'

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

function isScale(obj: any) {
  return typeof obj === 'object' && obj !== null
}

const ColorSwatch = ({ name, value }: { name: string; value: string }) => (
  <div className="flex flex-col items-center">
    <div
      className={cn('h-20 w-20 rounded-md border border-solid border-border')}
      style={{ background: value }}
    />
    <Typography variant="body-semi-s" className="mt-2 text-center">
      {name}
    </Typography>
    <Typography variant="body-xs">{value.toUpperCase()}</Typography>
  </div>
)

const ColorGroup = ({ group, colors }: { group: string; colors: any }) => (
  <div className="mb-12">
    <Typography variant="h3" className="mb-4 mt-6">
      {group.charAt(0).toUpperCase() + group.slice(1)}
    </Typography>
    <div className="flex flex-wrap gap-2">
      {isScale(colors) ? (
        Object.entries(colors).map(([scale, value]) => (
          <ColorSwatch
            key={scale}
            name={`${group.charAt(0).toUpperCase() + group.slice(1)} ${scale}`}
            value={value as string}
          />
        ))
      ) : (
        <ColorSwatch
          name={group.charAt(0).toUpperCase() + group.slice(1)}
          value={colors as string}
        />
      )}
    </div>
  </div>
)

export const ColorPalette = () => (
  <div className="mx-auto max-w-6xl bg-background p-10">
    {Object.entries(colors).map(([group, value]) => (
      <ColorGroup key={group} group={group} colors={value} />
    ))}
  </div>
)