import React, {ReactNode} from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {Typography} from '@components/_core/Typography';
import {useTheme} from '@shared/theme';

import {TitleSize, TitleVariant} from './interfaces';
import {getTextColors, styles, TITLE_TEXT_VARIANTS} from './styles';

export interface TitleProps {
  title: string | ReactNode;
  titleNumberOfLines?: number;
  description?: string;
  descriptionNumberOfLines?: number;
  renderDescription?: () => ReactNode;
  topText?: string;
  center?: boolean;
  size?: TitleSize;
  style?: StyleProp<ViewStyle>;
  disabled?: boolean;
  variant?: TitleVariant;
  titleMaxFontSizeMultiplier?: number;
  // TODO remove this prop when updating variants
  titleColor?: string;
}

export function Title({
  title,
  titleNumberOfLines = 1,
  titleMaxFontSizeMultiplier,
  description,
  descriptionNumberOfLines = 1,
  renderDescription,
  topText,
  center,
  style,
  disabled,
  variant = 'default',
  size = 'm',
  // TODO remove this prop when updating variants
  titleColor,
}: TitleProps) {
  const {theme} = useTheme();
  const textStyles = TITLE_TEXT_VARIANTS[size];
  const colors = getTextColors({theme, disabled, variant});

  return (
    <View style={[styles.shrink, center && styles.center, style]}>
      {!!topText && (
        <Typography
          color={colors.topText}
          variant={textStyles.topText}
          numberOfLines={1}>
          {topText}
        </Typography>
      )}
      <Typography
        align={center ? 'center' : 'left'}
        weight="semiBold"
        color={titleColor ?? colors.title}
        variant={textStyles.title}
        maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
        numberOfLines={titleNumberOfLines}>
        {title}
      </Typography>
      {description ? (
        <Typography
          align={center ? 'center' : 'left'}
          color={colors.description}
          variant={textStyles.description}
          numberOfLines={descriptionNumberOfLines}>
          {description}
        </Typography>
      ) : renderDescription ? (
        renderDescription()
      ) : null}
    </View>
  );
}

export * from './interfaces';