import React, { useContext } from 'react';
import { flexAlign } from '../helpers';
import { ISetup, IFontWeight } from 'interfaces';
import { ITypographyProps }from 'native/atoms/Typography/TypographyProps'
import { SubtitleXLarge, SubtitleLarge, SubtitleMedium, SubtitleSmall, SubtitleXSmall, HtmlContent } from './styles';
import { ThemeContext } from 'context/context';
import { mxSetup, theme } from 'data/dataMx';
import { Dimensions } from 'react-native';

export const AtomSubtitle = ({ align = 'center', size, text, color, weight = 'thin', styles = {}, isHTML = false }: ITypographyProps) => {
  const { fontFamily } = useContext<ISetup>(ThemeContext);
  const font: string = fontFamily.main[weight as keyof IFontWeight];
  const { mediaQuery: { tablet, mobile } } = mxSetup;
  const windowWidth = Dimensions.get('window').width;
  const widthMovileMax = mobile?.max ? parseInt(mobile.max.replace('px', '')) : 0;
  const widthTabletMin = tablet?.min ? parseInt(tablet.min.replace('px', '')) : 0;
  const widthTabletMax = tablet?.max ? parseInt(tablet.max.replace('px', '')) : 0;

  switch (size) {
    case 'xlarge':
      return <SubtitleXLarge
        color={color ? theme[color] : theme.neutral700}
        font={font}
        align={flexAlign[align].value}
        styles={styles}
      >
        {
          isHTML ?
          <HtmlContent
          baseStyle={{
            fontSize: windowWidth < widthMovileMax ? '30px' : '32px'
          }}
          source={{ html: text }} />
          : text
        }
      </SubtitleXLarge>;
    case 'large':
      return <SubtitleLarge
        color={color ? theme[color] : theme.neutral700}
        font={font}
        align={flexAlign[align].value}
        styles={styles}
      >
        {
          isHTML ?
          <HtmlContent
          baseStyle={{
            fontSize: windowWidth < widthMovileMax ? '26px' : '28px'
          }}
          source={{ html: text }} />
          : text
        }
      </SubtitleLarge>;
    case 'medium':
      return <SubtitleMedium
        color={color ? theme[color] : theme.neutral700}
        font={font}
        align={flexAlign[align].value}
        styles={styles}
      >
        {
          isHTML ?
          <HtmlContent
          baseStyle={{
            fontSize: windowWidth < widthMovileMax ? '22px' : '24px'
          }}
          source={{ html: text }} />
          : text
        }
      </SubtitleMedium>;
    case 'small':
      return <SubtitleSmall
        color={color ? theme[color] : theme.neutral700}
        font={font}
        align={flexAlign[align].value}
        styles={styles}
      >
        {
          isHTML ?
          <HtmlContent
          baseStyle={{
            fontSize: windowWidth < widthMovileMax ? '20px' : '22px'
          }}
          source={{ html: text }} />
          : text
        }
      </SubtitleSmall>;
    case 'xsmall':
      return <SubtitleXSmall
        color={color ? theme[color] : theme.neutral700}
        font={font}
        align={flexAlign[align].value}
        styles={styles}
      >
        {
          isHTML ?
          <HtmlContent
          baseStyle={{
            fontSize: windowWidth < widthMovileMax ? '18px' : '20px'
          }}
          source={{ html: text }} />
          : text
        }
      </SubtitleXSmall>;
  }
};