import React from 'react';
import { TextProps as RNTextProps } from 'react-native';

import { TextVariantProps } from '../../../theme/customProps/textVariant';
import { StyledText, StyledTextProps } from './Typography.styles';

export interface TypographyProps extends RNTextProps, StyledTextProps {
  children: React.ReactNode;
}

const useAccesibleText = (variant: TextVariantProps['variant']) => {
  if (
    !variant ||
    typeof variant === 'object' ||
    !variant.includes('headline')
  ) {
    return {};
  }

  return {
    // Supported only on the Web platform
    accessibilityRole: 'heading' as any,
    accessibilityLevel: variant.slice(-1),
  };
};

export const Typography = ({ children, variant, ...rest }: TypographyProps) => {
  const accessibilityProps = useAccesibleText(variant);

  return (
    <StyledText variant={variant} {...accessibilityProps} {...rest}>
      {children}
    </StyledText>
  );
};