import { FlatList, Pressable, Text, View } from "react-native";
import React, { useEffect, useState } from "react";
import { commonStyles } from "../../../styles/commonStyle";
import {
  HeaderContainer,
  SolidLine,
  IconBackground,
  RadioButton,
} from "@src/commonComponent";
import { Correct, ProfileSetting, UserPlus } from "@utils/icons";
import { external } from "../../../styles/externalStyle";
import { styles } from "./styles";
import { useValues } from "@src/utils/context/index";
import { appColors, windowHeight, windowWidth } from "@src/themes";
import Contacts from "react-native-contacts";
import { useAppNavigation } from "@src/utils/navigation";
import { useSelector } from "react-redux";
import { useRoute } from "@react-navigation/native";

export function ChooseRiderScreen() {
  const { bgFullStyle, linearColorStyle, textColorStyle, isDark } = useValues();
  const { navigate, replace }: any = useAppNavigation();
  const [selected, setSelected] = useState<number | null>(null);
  const [contacts, setContacts] = useState([]);
  const { translateData } = useSelector((state) => state.setting);
  const route = useRoute<any>();
  const {
    destination,
    stops,
    pickupLocation,
    service_ID,
    zoneValue,
    scheduleDate,
    service_category_ID,
    selectedImage,
    parcelWeight,
    pickupCoords,
    destinationCoords,
  } = route.params || {};
  const { textRTLStyle, viewRTLStyle } = useValues();

  useEffect(() => {
    fetchContacts();
  }, []);

  const fetchContacts = () => {
    Contacts.getAll()
      .then((contactsList) => {
        setContacts(contactsList);
      })
      .catch((error) => { });
  };

  const handleChange = (index: number, item: any) => {
    setSelected(selected === index ? null : index);
    replace("BookRide", {
      destination,
      stops,
      pickupLocation,
      service_ID,
      zoneValue,
      scheduleDate,
      service_category_ID,
      otherContect: item?.phoneNumbers[0]?.number,
      otherName: item?.givenName,
      selectedImage,
      parcelWeight,
      pickupCoords,
      destinationCoords,
    });
  };

  const renderItem = ({ item, index }: { item: any; index: number }) => {
    return (
      <View>
        <View style={[{ paddingHorizontal: windowWidth(14) }]}>
          <Pressable
            onPress={() => handleChange(index, item)}
            style={[
              external.ai_center,
              external.pv_10,
              {
                flexDirection: viewRTLStyle,
                justifyContent: "space-between",
                marginVertical: windowHeight(3),
                width: "90%",
              },
            ]}
          >
            <View
              style={[
                styles.container,
                {
                  backgroundColor: isDark
                    ? appColors.solidBorder
                    : appColors.lightGray,
                  flexDirection: viewRTLStyle,
                },
              ]}
            >
              <ProfileSetting color={textColorStyle} />
            </View>
            <View style={[external.ai_center, { flexDirection: viewRTLStyle }]}>
              <Pressable onPress={() => handleChange(index, item)}>
                <Text
                  style={[
                    styles.titleStyle,
                    { color: textColorStyle, textAlign: textRTLStyle },
                  ]}
                >
                  {item?.givenName}
                </Text>
              </Pressable>
              <View style={{ marginHorizontal: windowWidth(-10) }}>
                <RadioButton
                  color={isDark ? appColors.whiteColor : appColors.blackColor}
                  checked={selected === index}
                  onPress={() => handleChange(index, item)}
                />
              </View>
            </View>
          </Pressable>
        </View>
        <View
          style={[
            styles.line,
            {
              backgroundColor: isDark
                ? appColors.solidBorder
                : appColors.lightGray,
            },
          ]}
        />
      </View>
    );
  };
  return (
    <View
      style={[
        commonStyles.flexContainer,
        {
          backgroundColor: isDark ? appColors.solidBorder : appColors.lightGray,
          paddingBottom: windowHeight(25),
        },
      ]}
    >
      <HeaderContainer
        show={true}
        icon={
          <IconBackground
            icon={<UserPlus />}
            onPress={() =>
              navigate("AddNewRider", {
                destination,
                stops,
                pickupLocation,
                service_ID,
                zoneValue,
                scheduleDate,
                service_category_ID,
              })
            }
            borderColor={linearColorStyle}
          />
        }
        value={translateData.chooseaRider}
      />

      <View
        style={[
          external.main,
          {
            backgroundColor: isDark
              ? appColors.primaryText
              : appColors.whiteColor,
            alignSelf: "center",
            width: "92%",
            marginVertical: windowHeight(15),
            borderRadius: windowWidth(25),
            paddingBottom: windowHeight(20),
          },
        ]}
      >
        <FlatList
          renderItem={renderItem}
          data={contacts}
          showsVerticalScrollIndicator={false}
        />
      </View>
    </View>
  );
}
