import {darkPalette, lightPalette} from './palette'
import type {Theme, ThemeName} from './types'

function makeTheme(name: ThemeName): Theme {
  const c = name === 'light' ? lightPalette : darkPalette

  return {
    name,
    palette: c,
    atoms: {
      bg: {backgroundColor: c.bg},
      bg_hard: {backgroundColor: c.bg_hard},
      bg_contrast_25: {backgroundColor: c.contrast_25},
      bg_contrast_50: {backgroundColor: c.contrast_50},
      bg_contrast_100: {backgroundColor: c.contrast_100},
      bg_contrast_200: {backgroundColor: c.contrast_200},
      bg_contrast_300: {backgroundColor: c.contrast_300},
      bg_contrast_400: {backgroundColor: c.contrast_400},
      bg_contrast_500: {backgroundColor: c.contrast_500},
      bg_contrast_600: {backgroundColor: c.contrast_600},
      bg_contrast_700: {backgroundColor: c.contrast_700},
      bg_contrast_800: {backgroundColor: c.contrast_800},
      bg_contrast_900: {backgroundColor: c.contrast_900},
      bg_contrast_950: {backgroundColor: c.contrast_950},
      bg_contrast_975: {backgroundColor: c.contrast_975},

      border_contrast_low: {borderColor: c.contrast_100},
      border_contrast_medium: {borderColor: c.contrast_200},
      border_contrast_high: {borderColor: c.contrast_500},

      text: {color: c.contrast_950},
      text_contrast_low: {color: c.contrast_300},
      text_contrast_medium: {color: c.contrast_400},
      text_contrast_high: {color: c.contrast_600},
      text_inverted: {color: c.bg_hard},
    },
  }
}

export const themes: Record<ThemeName, Theme> = {
  light: makeTheme('light'),
  dark: makeTheme('dark'),
}
