import React, { useContext } from 'react';
import { ITypographyProps } from 'native/atoms/Typography/TypographyProps';
import { ThemeContext } from 'context/context';
import { TruncateContainer, Truncate } from './styles';
import { theme } from 'data/dataMx';

export interface ITruncateProps extends ITypographyProps {
  /** Limit of number of lines to truncate the text */
  numberOfLineTruncate?: number;
}

const truncateTypes = {
  xlarge: {
    sizeValue: '24px',
  },
  large: {
    sizeValue: '20px',
  },
  medium: {
    sizeValue: '16px',
  },
  small: {
    sizeValue: '14px',
  },
  xsmall: {
    sizeValue: '12px',
  },
}

export const AtomTruncate = ({ text, size, color, weight = 'regular', numberOfLineTruncate = 1, styles = {} }: ITruncateProps) => {
  const { fontFamily } = useContext(ThemeContext);
  return (
    <TruncateContainer>
      <Truncate
        font={fontFamily.main[weight]}
        size={truncateTypes[size].sizeValue}
        color={color ? theme[color] : theme.neutral700}
        numberOfLines={numberOfLineTruncate}
        styles={styles}
      >
        {text}
      </Truncate>
    </TruncateContainer>
  )
}
