import MaskedView from "@react-native-masked-view/masked-view";
import LinearGradient from "react-native-linear-gradient";
import { Text } from "react-native";
import { TextFieldData } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
import { isValidHexColors } from "../../../App/common/utilities/ValidateColors";

export const GradientText = ({
  textFieldData,
  colorsArray,
}: {
  textFieldData: TextFieldData;
  colorsArray?: string[];
}) => {
  return (
    <GradientMask colorsArray={colorsArray} textStyle={textFieldData.textStyle}>
      {textFieldData.text}
    </GradientMask>
  );
};

export const GradientMask = (props: any) => {
  return (
    <MaskedView maskElement={<Text {...props} style={props.textStyle} />}>
      <LinearGradient
        colors={isValidHexColors(props.colorsArray)}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
      >
        <Text {...props} style={[props.textStyle, { opacity: 0 }]} />
      </LinearGradient>
    </MaskedView>
  );
};