import React, { useContext } from 'react';
import { DisplayXLarge, DisplayLarge, DisplayMedium, DisplaySmall, DisplayXSmall, HtmlContent } from './styles';
import { flexAlign } from 'native/atoms/Typography/helpers';
import { ISetup, IFontWeight } from 'interfaces';
import { ITypographyProps} from 'native/atoms/Typography/TypographyProps';
import { ThemeContext } from 'context/context';
import { theme } from 'data/dataMx';

export const AtomDisplay = ({ size, text, color, weight = 'thin', align = 'center', styles = {}, isHTML = false }: ITypographyProps) => {
  const { fontFamily } = useContext<ISetup>(ThemeContext);
  const font: string = fontFamily.main[weight as keyof IFontWeight];

  switch (size) {
    case 'xlarge':
      return <DisplayXLarge color={color ? theme[color] : theme.neutral700}
        font={font}
        align={flexAlign[align].value}
        styles={styles}
      >
        {
          isHTML ?
            <HtmlContent baseStyle={{ fontSize: '48px'}} source={{ html: text }} />
          : text
        }
      </DisplayXLarge>;
    case 'large':
      return <DisplayLarge color={color ? theme[color] : theme.neutral700}
        font={font}
        align={flexAlign[align].value}
        styles={styles}
      >
        {
          isHTML ?
            <HtmlContent baseStyle={{ fontSize: '46px'}} source={{ html: text }} />
          : text
        }
      </DisplayLarge>;
    case 'medium':
      return <DisplayMedium color={color ? theme[color] : theme.neutral700}
        font={font}
        align={flexAlign[align].value}
        styles={styles}
      >
        {
          isHTML ?
            <HtmlContent baseStyle={{ fontSize: '42px'}} source={{ html: text }} />
          : text
        }
      </DisplayMedium>;
    case 'small':
      return <DisplaySmall color={color ? theme[color] : theme.neutral700}
        font={font}
        align={flexAlign[align].value}
        styles={styles}
      >
        {
          isHTML ?
            <HtmlContent baseStyle={{ fontSize: '40px'}} source={{ html: text }} />
          : text
        }
      </DisplaySmall>;
    case 'xsmall':
      return <DisplayXSmall color={color ? theme[color] : theme.neutral700}
        font={font}
        align={flexAlign[align].value}
        styles={styles}
      >
        {
          isHTML ?
            <HtmlContent baseStyle={{ fontSize: '38px'}} source={{ html: text }} />
          : text
        }
      </DisplayXSmall>;
  }
};