import type { ReactNode } from 'react';
import React from 'react';
import type {
  TextProps as NativeTextProps,
  StyleProp,
  TextStyle,
} from 'react-native';
import type { TypographyIntent } from '../types';
import { pickAccessibilityProps } from '../utils';
import { StyledTitle } from './StyledTitle';
import GradientText from '../GradientText';

export interface TitleProps extends NativeTextProps {
  /**
   * Text content.
   */
  children: ReactNode;
  /**
   * Visual intent color to apply to the text.
   */
  intent?: TypographyIntent;
  /**
   * Additional style.
   */
  style?: StyleProp<TextStyle>;
  /**
   * Testing id of the component.
   */
  testID?: string;
  /**
   * The typeface to render the text in:
   * - `neutral`: The default typeface for the platform.
   * - `playful`: To visualise a playful content.
   */
  typeface?: 'neutral' | 'playful';
  /**
   * The level of Title including h1, h2, h3, h4, h5 and h6.
   */
  level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
  /**
   * Font style to apply to the text.
   */
  fontStyle?: 'normal' | 'italic';
}

const Title = ({
  children,
  intent = 'body',
  allowFontScaling = false,
  level = 'h1',
  typeface = 'neutral',
  fontStyle = 'normal',
  style,
  testID,
  ...nativeProps
}: TitleProps) => {
  const isAi = intent === 'ai';

  const styledText = (
    <StyledTitle
      {...nativeProps}
      themeLevel={level}
      themeTypeface={typeface}
      themeIntent={isAi ? 'body' : intent}
      themeIsItalic={fontStyle === 'italic'}
      allowFontScaling={allowFontScaling}
      style={style}
      testID={testID}
    >
      {children}
    </StyledTitle>
  );

  if (isAi) {
    return (
      <GradientText {...pickAccessibilityProps(nativeProps)}>
        {styledText}
      </GradientText>
    );
  }

  return styledText;
};

export default Title;