import { Text, StyleSheet, TouchableOpacity } from 'react-native';
import type { Theme, RsTextStyle } from '../styles/types';
import { useTheme } from '../hooks/ThemeProvider';
import { useMemo } from 'react';

const RsText: React.FC<RsTextStyle> = ({
  fontSize = 16,
  fontWeight = 'Regular',
  textAlign = 'left',
  textTransform = 'none',
  color,
  text = 'Ramses Text',
  pressable = false,
  onPress = () => {},
  style = {},
  containerStyle = {},
  props,
}) => {
  const theme = useTheme();
  const styles = useMemo(
    () =>
      generateStyles(
        theme,
        {
          fontSize,
          fontWeight,
          textAlign,
          textTransform,
          color,
        },
        pressable
      ),
    [theme, fontSize, fontWeight, textAlign, textTransform, color, pressable]
  );

  return (
    <TouchableOpacity
      disabled={!pressable}
      onPress={pressable ? onPress : undefined}
      style={containerStyle}
    >
      <Text style={[styles.text, style]} {...props}>
        {text}
      </Text>
    </TouchableOpacity>
  );
};

export default RsText;

const generateStyles = (theme: Theme, style: RsTextStyle, pressable: boolean) =>
  StyleSheet.create({
    text: {
      color:
        style.color ??
        (!pressable ? theme.Text.text : theme.Text.highlightText),
      fontSize: style.fontSize,
      textAlign: style.textAlign,
      fontFamily: `Cairo-${style.fontWeight}-Tight`,
      includeFontPadding: false,
      lineHeight: style.fontSize ? style.fontSize * 1.2 : 28,
      textTransform: style.textTransform,
      textDecorationLine: pressable ? 'underline' : 'none',
      textDecorationColor:
        style.color ??
        (!pressable ? theme.Text.text : theme.Text.highlightText),
    },
  });