import React from "react";
import { StyleSheet, View, ViewStyle } from "react-native";
import { commonStyles } from "../../App/Container/Navi-Insurance/Styles";
import { GenericActionPayload } from "../../App/common/actions/GenericAction";
import { CtaData } from "../../App/common/interface";
import { ComparisonWidgetData } from "../../App/common/interface/widgets/widgetData/ComparisonWidgetData";
import Colors from "../../assets/colors/colors";
import { StyledImage } from "../StyledImage";
import TitleWidget from "./title-widget/TitleWidget";

const ComparisonWidget = ({
  widgetData,
  widgetStyle,
  handleActions,
  widgetIndex,
  handleClick,
}: {
  widgetData: ComparisonWidgetData;
  widgetStyle: ViewStyle;
  handleActions: (screenActionPayload?: GenericActionPayload) => void;
  widgetIndex: number;
  handleClick?: (ctaData: CtaData) => void;
}) => {
  return (
    <View style={styles.container}>
      <View style={styles.left_element}>
        {widgetData.leftIcon && (
          <StyledImage imageFieldData={widgetData?.leftIcon} />
        )}
        {widgetData.leftIcon && widgetData.leftTitle && (
          <View style={{ width: 8 }} />
        )}
        {widgetData.leftTitle && (
          <TitleWidget
            widgetData={widgetData?.leftTitle}
            widgetStyle={commonStyles.contentAlignLeft}
          />
        )}
      </View>

      <View style={styles.divider}>
        {widgetData.divider && (
          <StyledImage imageFieldData={widgetData?.divider} />
        )}
      </View>

      <View style={styles.right_element}>
        {widgetData.rightIcon && (
          <StyledImage imageFieldData={widgetData?.rightIcon} />
        )}
        {widgetData.rightIcon && widgetData.rightTitle && (
          <View style={{ width: 8 }} />
        )}
        {widgetData.rightTitle && (
          <TitleWidget
            widgetData={widgetData?.rightTitle}
            widgetStyle={commonStyles.contentAlignLeft}
          />
        )}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    borderWidth: 1,
    borderColor: Colors.lightGray,
    borderRadius: 4,
    padding: 16,
    backgroundColor: "white",
  },
  left_element: {
    flex: 0.4,
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
  },
  divider: {
    flex: 0.2,
    flexDirection: "row",
    justifyContent: "center",
  },
  right_element: {
    flex: 0.4,
    flexDirection: "row",
    justifyContent: "flex-end",
    alignItems: "center",
  },
});

export default ComparisonWidget;