'use client'

import { vars } from 'nativewind'

import { variables } from '@/figma-vars'

const colors = Object.entries(variables['theme-color']).reduce(
  (acc, [key, value]) => {
    acc[`--color-${key}`] = value
    return acc
  },
  {} as Record<string, string>,
)

const buttonVars = Object.entries(variables['[button]']).reduce(
  (acc, [key, value]) => {
    acc[`--${key}`] = typeof value === 'number' ? `${value}px` : value
    return acc
  },
  {} as Record<string, string>,
)

const typographyVars = Object.entries(variables['theme-typography']).reduce(
  (acc, [key, value]) => {
    if (key.includes('family')) {
      const font =
        variables['theme-typography'][key.replace('family', 'font') as keyof (typeof variables)['theme-typography']]
      acc[`--typography-${key}`] = `${(value as string).replace(/\s/g, '')}-${font}`
    } else if (key.includes('font')) {
      return acc
    } else {
      acc[`--typography-${key}`] = `${value}`
    }

    return acc
  },
  {} as Record<string, string>,
)

const selectorsVars = Object.entries(variables['[selectors]']).reduce(
  (acc, [key, value]) => {
    acc[`--${key}`] = typeof value === 'number' ? `${value}px` : `${value}`
    return acc
  },
  {} as Record<string, string>,
)

export const config = {
  light: vars({
    ...colors,
    ...buttonVars,
    ...typographyVars,
    ...selectorsVars,
  }),
  dark: vars({
    ...colors,
    ...buttonVars,
    ...typographyVars,
    ...selectorsVars,
  }),
}