import { Text } from 'react-native';
import styled from '@emotion/native';

const FONTWEIGHT_MAP = {
  light: 'light',
  regular: 'regular',
  'semi-bold': 'semiBold',
} as const;

const StyledText = styled(Text)<{
  themeFontSize:
    | 'xsmall'
    | 'small'
    | 'medium'
    | 'large'
    | 'xlarge'
    | 'xxxlarge'
    | 'xxxxlarge'
    | 'xxxxxlarge'
    | '6xlarge'
    | '7xlarge';
  themeFontWeight: 'light' | 'regular' | 'semi-bold';
  themeIntent:
    | 'body'
    | 'subdued'
    | 'primary'
    | 'secondary'
    | 'success'
    | 'info'
    | 'warning'
    | 'danger'
    | 'inverted'
    | 'archived'
    | 'disabled';
  themeTypeface: 'neutral' | 'playful';
}>(({ themeFontSize, themeFontWeight, themeIntent, themeTypeface, theme }) => {
  const sizeStyles = {
    fontSize: theme.__hd__.typography.fontSizes[themeFontSize],
    lineHeight: theme.__hd__.typography.lineHeights[themeFontSize],
    letterSpacing: theme.__hd__.typography.fontSizes[themeFontSize] * 0.03,
  };

  return {
    ...sizeStyles,
    fontFamily:
      theme.__hd__.typography.fonts[themeTypeface][
        FONTWEIGHT_MAP[themeFontWeight]
      ],
    color: theme.__hd__.typography.colors[themeIntent],
  };
});

export { StyledText };