import React, { useMemo } from "react";
import { StyleSheet, View, ViewStyle } from "react-native";
import { GenericActionPayload } from "../../App/common/actions/GenericAction";
import { NaviLinearGradient } from "../../App/common/hooks/useGradient";
import { CtaData } from "../../App/common/interface";
import { HeaderLottieAnimationWidgetData } from "../../App/common/interface/widgets/widgetData/HeaderLottieAnimationWidgetData";
import Colors from "../../assets/colors/colors";
import { StyledLottie } from "./styled-lottie/StyledLottie";
import { StyledText } from "./styled-text/StyledText";

const HeaderLottieAnimationWidget = ({
  widgetData,
  widgetStyle,
  handleActions,
  widgetIndex,
  handleClick,
}: {
  widgetData: HeaderLottieAnimationWidgetData;
  widgetStyle: ViewStyle;
  handleActions: (screenActionPayload?: GenericActionPayload) => void;
  widgetIndex: number;
  handleClick?: (ctaData: CtaData) => void;
}) => {
  const MemoizedStyledLottie = useMemo(() => {
    return (
      <View style={styles.backgroundLottie}>
        {widgetData?.backgroundLottie && (
          <StyledLottie lottieFieldData={widgetData?.backgroundLottie} />
        )}
      </View>
    );
  }, [widgetData?.backgroundLottie]);
  return (
    <NaviLinearGradient
      gradientColors={widgetData?.backgroundGradient}
      defaultColors={[Colors.white, Colors.lightBlue]}
      orientation={widgetData?.gradientOrientation}
    >
     <View style={styles.container}>
        {MemoizedStyledLottie}
        <View style={styles.title}>
          {widgetData?.title && (
            <StyledText textFieldData={widgetData?.title} />
          )}
        </View>
      </View>
    </NaviLinearGradient>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: "flex-start",
    alignItems: "center",
    position: "relative",
  },
  backgroundLottie: {
    width: "100%",
    height: 233,
    top: 0,
    left: 0,
  },
  title: {
    position: "absolute",
    zIndex: 1,
    marginTop: 84,
  },
});

export default HeaderLottieAnimationWidget;