import {
  Text,
  View,
  TouchableOpacity,
  SafeAreaView,
  Platform,
} from "react-native";
import React from "react";
import { Back } from "@utils/icons";
import { styles } from "./style";
import { appColors, windowWidth } from "@src/themes";
import { useAppNavigation } from "@src/utils/navigation";
import { useValues } from "@src/utils/context/index";
import { HeaderPropType } from "../type";

export function HeaderContainer({
  value,
  show,
  icon,
  goicon,
  onPressIcon,
  lastIcon,
}: HeaderPropType) {
  const { textColorStyle, imageRTLStyle, viewRTLStyle, isDark } = useValues();
  const { goBack } = useAppNavigation();

  const flexGrowValue = show ? undefined : 0.45;
  const justifyContentValue = show ? "space-between" : undefined;

  return (
    <SafeAreaView
      style={[
        styles.viewContainer,
        {
          justifyContent: justifyContentValue,
          flexDirection: viewRTLStyle,
          backgroundColor: isDark
            ? appColors.primaryText
            : appColors.whiteColor,
        },
      ]}
    >
      {goicon ? (
        goicon
      ) : (
        <View
          style={{
            flexGrow: flexGrowValue,
            flexDirection: viewRTLStyle,
            marginHorizontal: Platform.OS === "ios" ? windowWidth(25) : 0,
          }}
        >
          <TouchableOpacity
            style={[
              styles.container,
              {
                backgroundColor: isDark
                  ? appColors.darkHeader
                  : appColors.whiteColor,
                borderColor: isDark ? appColors.darkBorder : appColors.border,
                transform: [{ scale: imageRTLStyle }],
              },
            ]}
            onPress={goBack}
          >
            <Back />
          </TouchableOpacity>
          <Text style={[styles.textContainer, { color: textColorStyle }]}>
            {value}
          </Text>
        </View>
      )}

      {show && (
        <TouchableOpacity
          onPress={onPressIcon}
          activeOpacity={0.7}
          style={[
            styles.container,
            {
              backgroundColor: isDark
                ? appColors.darkHeader
                : appColors.whiteColor,
              borderColor: isDark ? appColors.darkBorder : appColors.border,
              transform: [{ scale: imageRTLStyle }],
              marginHorizontal: Platform.OS === "ios" ? windowWidth(25) : 0,
            },
          ]}
        >
          {icon}
        </TouchableOpacity>
      )}

      {lastIcon && <View>{lastIcon}</View>}
    </SafeAreaView>
  );
}
