import * as React from "react";
import { View, Text } from "react-native";
import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";

import { textTransform } from "@applicaster/zapp-react-native-utils/cellUtils/";

export type TitleProps = {
  text: string;
  letterSpacing: number;
  lineHeight: number;
  fontFamily: string;
  fontSize: number;
  color: string;
  marginTop: number;
  marginLeft: number;
  marginRight: number;
  marginBottom: number;
  transform: string;
  numberOfLines: number;
};

export function Title(props: TitleProps) {
  const {
    text,
    letterSpacing,
    lineHeight,
    fontFamily,
    fontSize,
    color,
    marginTop,
    marginBottom,
    marginLeft,
    marginRight,
    numberOfLines,
    transform,
  } = props;

  const isRTL = useIsRTL();
  const writingDirection = isRTL ? "rtl" : "ltr";

  if (!text) return null;

  return (
    <View
      style={{
        marginTop,
        marginBottom,
        marginLeft,
        marginRight,
      }}
    >
      {!!text?.length && (
        <Text
          style={{
            letterSpacing,
            fontFamily,
            fontSize,
            lineHeight,
            color,
            writingDirection,
          }}
          numberOfLines={numberOfLines}
          ellipsizeMode="tail"
        >
          {textTransform(transform, text)}
        </Text>
      )}
    </View>
  );
}