import styled from '@emotion/native';
import { Text } from 'react-native';
import type { TypographyColorIntent } from '../types';

type ThemeVariant =
  | 'small'
  | 'small-bold'
  | 'small-medium'
  | 'regular'
  | 'regular-bold'
  | 'regular-medium';
type FontWeights = 'regular' | 'medium' | 'semiBold';

const FONTWEIGHT_MAP: Record<ThemeVariant, FontWeights> = {
  regular: 'regular',
  small: 'regular',
  'regular-medium': 'medium',
  'small-medium': 'medium',
  'regular-bold': 'semiBold',
  'small-bold': 'semiBold',
} as const;

type FontSizes = 'regular' | 'small';
const FONTSIZE_MAP: Record<ThemeVariant, FontSizes> = {
  regular: 'regular',
  small: 'small',
  'regular-medium': 'regular',
  'small-medium': 'small',
  'regular-bold': 'regular',
  'small-bold': 'small',
} as const;
const StyledBody = styled(Text)<{
  themeIntent: TypographyColorIntent;
  themeTypeface: 'neutral' | 'playful';
  themeVariant: ThemeVariant;
  themeIsItalic?: boolean;
}>(({ themeIntent, theme, themeTypeface, themeVariant, themeIsItalic }) => {
  const fontWeight = FONTWEIGHT_MAP[themeVariant];
  const fontFamily = themeIsItalic
    ? theme.__hd__.typography.fonts[themeTypeface][`${fontWeight}Italic`]
    : theme.__hd__.typography.fonts[themeTypeface][fontWeight];

  return {
    fontSize:
      theme.__hd__.typography.fontSizes.body[themeTypeface][
        FONTSIZE_MAP[themeVariant]
      ],
    lineHeight:
      theme.__hd__.typography.lineHeights.body[themeTypeface][
        FONTSIZE_MAP[themeVariant]
      ],
    letterSpacing:
      theme.__hd__.typography.letterSpacings.body[themeTypeface][fontWeight],
    fontFamily,
    color: theme.__hd__.typography.colors[themeIntent],
  };
});

export { StyledBody };