import React from "react";
import { Text, TouchableOpacity, View } from "react-native";
import styles from "./styles";
import { useValues } from "@src/utils/context";
import {
  Back,
  Card,
  Coupon,
  FillCard,
  FillTicket,
  FillUser,
  User,
} from "@src/utils/icons";
import { appColors, windowWidth } from "@src/themes";
import { useNavigation } from "@react-navigation/native";
import { useSelector } from "react-redux";
import { notificationHelper } from "@src/commonComponent";
import { Preference } from "@src/assets/icons/preference";
import { PreferenceFil } from "@src/assets/icons/preferenceFil";

export function RideHeader({
  cardPress,
  couponPress,
  userPress,
  show,
  otherName,
  selectedItem,
  handelPreference,
}: any) {
  const { viewRTLStyle, isDark, textColorStyle } = useValues();
  const navigation = useNavigation();
  const { translateData } = useSelector((state: any) => state.setting);
  const handleBack = () => navigation.goBack();

  const getIconColor = (name: string) =>
    selectedItem === name ? appColors.primary : appColors.blackColor;

  return (
    <View
      style={[
        styles.view,
        {
          flexDirection: viewRTLStyle,
          backgroundColor: isDark
            ? appColors.primaryText
            : appColors.whiteColor,
        },
      ]}
    >
      <TouchableOpacity
        style={[
          styles.icon,
          {
            borderColor: isDark ? appColors.darkBorder : appColors.border,
            backgroundColor: isDark
              ? appColors.darkHeader
              : appColors.whiteColor,
          },
        ]}
        activeOpacity={0.7}
        onPress={handleBack}
      >
        <Back />
      </TouchableOpacity>

      <View
        style={[
          styles.box,
          {
            backgroundColor: isDark
              ? appColors.darkPrimary
              : appColors.lightGray,
            flexDirection: viewRTLStyle,
            width: show ? windowWidth(270) : windowWidth(200),
          },
        ]}
      >
        <TouchableOpacity
          style={[
            styles.round,
            {
              borderColor: isDark ? appColors.darkBorder : appColors.border,
              backgroundColor: isDark
                ? appColors.darkHeader
                : appColors.whiteColor,
            },
          ]}
          activeOpacity={0.7}
          onPress={cardPress}
        >
          {selectedItem === "card" ? <FillCard /> : <Card />}
        </TouchableOpacity>

        {show && (
          <View
            style={[
              styles.divider,
              { backgroundColor: isDark ? appColors.gray : appColors.gray },
            ]}
          />
        )}

        {show && (
          <TouchableOpacity
            style={[
              styles.round,
              {
                borderColor: isDark ? appColors.darkBorder : appColors.border,
                backgroundColor: isDark
                  ? appColors.darkHeader
                  : appColors.whiteColor,
              },
            ]}
            activeOpacity={0.7}
            onPress={couponPress}
          >
            {selectedItem === "coupon" ? <FillTicket /> : <Coupon />}
          </TouchableOpacity>
        )}

        <View
          style={[
            styles.divider,
            { backgroundColor: isDark ? appColors.gray : appColors.gray },
          ]}
        />
        <TouchableOpacity
          activeOpacity={0.7}
          onPress={handelPreference}
          style={[
            styles.round,
            {
              borderColor: isDark ? appColors.darkBorder : appColors.border,
              backgroundColor: isDark
                ? appColors.darkHeader
                : appColors.whiteColor,
            },
          ]}
        >
          {selectedItem === "preference" ? <PreferenceFil /> : <Preference />}
        </TouchableOpacity>

        <View
          style={[
            styles.divider,
            { backgroundColor: isDark ? appColors.gray : appColors.gray },
          ]}
        />

        <TouchableOpacity
          style={[
            styles.round,
            {
              borderColor: isDark ? appColors.darkBorder : appColors.border,
              backgroundColor: isDark
                ? appColors.darkHeader
                : appColors.whiteColor,
            },
          ]}
          activeOpacity={0.7}
          onPress={userPress}
        >
          {otherName ? (
            <Text
              style={[
                styles.userLetter,
                { color: isDark ? appColors.whiteColor : getIconColor("user") },
              ]}
            >
              {otherName.charAt(0).toUpperCase()}
            </Text>
          ) : selectedItem === "user" ? (
            <FillUser />
          ) : (
            <User />
          )}
        </TouchableOpacity>
      </View>
    </View>
  );
}
