import React, { useContext } from 'react';
import { StyleProp, TextStyleAndroid, ViewStyle } from 'react-native';
import AppContext from '../AppProvider/AppContext';
import { RFValue } from '../RFValue';
import { TextStyle } from './TextNative.style';

export interface IPropsText extends React.ComponentProps<any> {
   fontWeight?: 'bold' | 'normal';
   color?: string;
   size?: number;
   alignSelfCenter?: boolean;
   alignCenter?: boolean;
   alignRight?: boolean;
   style?: StyleProp<TextStyleAndroid>;
   ref?: any;
}

export const TextNative: React.FunctionComponent<IPropsText> = ({
   color = '#333',
   bold = false,
   extraBold = false,
   fontWeight,
   size = 15.5,
   testID,
   alignSelfCenter = false,
   alignCenter = false,
   alignRight = false,
   style = {},
   children,
   ref,
   ...rest
}: IPropsText) => {
   const { native: { fontFamily = '', fontWeightDefault = 'normal' } = {} } = useContext(AppContext);

   const fontFamilyStyle = fontFamily ? `${fontFamily}-${fontWeight ?? fontWeightDefault}` : null;
   
   return (
      <TextStyle
         ref={ref}
         colorText={color}
         fontFamily={fontFamilyStyle}
         size={RFValue(size)}
         alignSelfCenter={alignSelfCenter}
         alignCenter={alignCenter}
         alignRight={alignRight}
         style={style}
         bold={!fontFamilyStyle && bold}
         testID={testID}
         {...rest}
      >
         {children}
      </TextStyle>
   );
};
