import { ThemeConfig } from '../../shared/models/config';
import { ThemeCssVariables } from '../tokens/theme-css-variable.model';
import { THEME_VARIABLE_MAP } from '../tokens/theme-variable-map';

export function mapThemeConfigToCssVariables(theme: ThemeConfig): ThemeCssVariables {
  const vars: ThemeCssVariables = {
    [THEME_VARIABLE_MAP.primary]: theme.palette.primary,
    [THEME_VARIABLE_MAP.secondary]: theme.palette.secondary,
    [THEME_VARIABLE_MAP.accent]: theme.palette.accent,
    [THEME_VARIABLE_MAP.success]: theme.palette.success,
    [THEME_VARIABLE_MAP.warning]: theme.palette.warning,
    [THEME_VARIABLE_MAP.danger]: theme.palette.danger,
    [THEME_VARIABLE_MAP.info]: theme.palette.info,
    [THEME_VARIABLE_MAP.textPrimary]: theme.palette.textPrimary,
    [THEME_VARIABLE_MAP.textSecondary]: theme.palette.textSecondary,
    [THEME_VARIABLE_MAP.backgroundPrimary]: theme.palette.backgroundPrimary,
    [THEME_VARIABLE_MAP.backgroundSecondary]: theme.palette.backgroundSecondary,
    [THEME_VARIABLE_MAP.border]: theme.palette.border,
    '--app-font-family': theme.typography.primaryFontFamily,
    '--app-font-size': `${theme.typography.baseFontSize}px`,
    '--app-spacing-unit': `${theme.spacing.unit}px`
  };

  for (const [key, value] of Object.entries(theme.borderRadiusScale)) {
    vars[`--radius-${key}`] = value;
  }

  for (const [key, value] of Object.entries(theme.shadows)) {
    vars[`--shadow-${key}`] = value;
  }

  return vars;
}