import { View, Text, ActivityIndicator } from "react-native";
import React from "react";
import { useValues } from "@src/utils/context/index";
import styles from "../../styles";
import { PlatNumber } from "@utils/icons";
import { appColors } from "@src/themes";
import { useSelector } from "react-redux";

export function TexiDetail({
  otp,
  vehicleData,
}: {
  otp: number;
  vehicleData: any;
}) {
  const {
    viewRTLStyle,
    textRTLStyle,
    textColorStyle,
    viewSelfRTLStyle,
    isDark,
    isRTL
  } = useValues();
  const { translateData } = useSelector((state) => state.setting);

  const otpDigits = otp
    ? (isRTL
      ? otp.toString().split("").reverse()
      : otp.toString().split("")
    )
    : [];

  return (
    <>
      {otp ? (
        <View style={[styles.texiDetail, { flexDirection: viewRTLStyle }]}>
          <View style={styles.detailView}>
            <View style={{ flexDirection: viewRTLStyle, alignItems: "center" }}>
              <Text
                style={[
                  styles.texiNo,
                  { color: textColorStyle, textAlign: textRTLStyle },
                ]}
              >
                {vehicleData?.plate_number}
              </Text>
            </View>
            <Text
              style={[
                styles.textName,
                { color: appColors.iconColor, textAlign: textRTLStyle },
              ]}
            >
              {vehicleData?.vehicle_model}
            </Text>
          </View>
          <View style={[styles.pinView, { alignItems: viewSelfRTLStyle }]}>
            <View style={{ flexDirection: viewRTLStyle }}>
              {otpDigits.map((digit, index) => (
                <View
                  key={index}
                  style={[
                    styles.pin,
                    {
                      backgroundColor: isDark
                        ? appColors.whiteColor
                        : appColors.blackColor,
                    },
                  ]}
                >
                  <Text
                    style={{
                      color: isDark
                        ? appColors.blackColor
                        : appColors.whiteColor,
                    }}
                  >
                    {digit}
                  </Text>
                </View>
              ))}
            </View>


            <Text
              style={[
                styles.pinTitle,
                { color: appColors.iconColor, textAlign: textRTLStyle },
              ]}
            >
              {translateData.pin}
            </Text>
          </View>
        </View>
      ) : (
        <View style={[styles.loader, { flexDirection: viewRTLStyle }]}>
          <ActivityIndicator size="large" color={appColors.primary} />
        </View>
      )}
    </>
  );
}
