import { Image, Text, View } from "react-native";
import React from "react";
import { TaxiDetails } from "../../completeRideScreen/detailContainer/taxiDetails/index";
import { BillDetails } from "../../completeRideScreen/detailContainer/billDetails/index";
import { commonStyles } from "../../../../../styles/commonStyle";
import { external } from "../../../../../styles/externalStyle";
import { styles } from "./styles";
import { fontSizes, windowHeight, windowWidth } from "@src/themes";
import { useValues } from "@src/utils/context/index";
import { appColors, appFonts } from "@src/themes";
import { vehicleInterface } from "@src/api/interface/vehicleTypeInterface";
import { rideDetailsInterface } from "@src/api/interface/rideRequestInterface";
import { useSelector } from "react-redux";
import { SolidLine } from "@src/commonComponent";

type pendingdetailsProps = {
  rideDetails: rideDetailsInterface;
  vehicleData: vehicleInterface;
};

export function PendingDetails({
  rideDetails,
  vehicleData,
}: pendingdetailsProps | any) {
  const { bgFullStyle, viewRTLStyle, textRTLStyle, isDark } = useValues();
  const { translateData } = useSelector((state: any) => state.setting);

  return (
    <View>
      {rideDetails?.service?.slug !== "pending" && (
        <View
          style={[
            styles.pendingViewContainer,
            {
              flexDirection: viewRTLStyle,
              backgroundColor: bgFullStyle,
              borderColor: isDark ? appColors.darkBorder : appColors.border,
              justifyContent: "space-between",
            },
          ]}
        >
          <View>
            <Text
              style={[
                commonStyles.regularText,
                external.fg_1,
                [
                  styles.rideOTPText,
                  {
                    textAlign: textRTLStyle,
                    color: isDark
                      ? appColors.whiteColor
                      : appColors.primaryText,
                    marginTop: windowHeight(4),
                    fontFamily: appFonts.semiBold,
                    fontSize: fontSizes.FONT18,
                  },
                ],
              ]}
            >
              {rideDetails?.plate_number}
            </Text>
            <Text
              style={[
                commonStyles.regularText,
                external.fg_1,
                [
                  styles.rideOTPText,
                  {
                    textAlign: textRTLStyle,
                    color: appColors.iconColor,
                    marginTop: windowHeight(-8),
                  },
                ],
              ]}
            >
              {rideDetails?.vehicle_model}
            </Text>
          </View>
          <View>
            <View style={{ flexDirection: viewRTLStyle }}>
              {rideDetails.otp
                ? rideDetails.otp
                  .toString()
                  .split("")
                  ?.map((digit: any, index: number) => (
                    <View
                      style={[
                        styles.pin,
                        {
                          backgroundColor: isDark
                            ? appColors.whiteColor
                            : appColors.blackColor,
                        },
                      ]}
                    >
                      <Text
                        key={index}
                        style={{
                          fontFamily: appFonts.medium,
                          fontSize: fontSizes.FONT15,
                          color: isDark
                            ? appColors.blackColor
                            : appColors.whiteColor,
                        }}
                      >
                        {digit}
                      </Text>
                    </View>
                  ))
                : null}
            </View>
            <Text
              style={{
                fontFamily: appFonts.medium,
                fontSize: fontSizes.FONT15,
                color: appColors.iconColor,
                textAlign: "right",
                marginTop: windowHeight(5),
                marginHorizontal: windowWidth(5),
              }}
            >
              Start Ride PIN
            </Text>
          </View>
        </View>
      )}

      <View
        style={[
          styles.container,
          {
            backgroundColor: isDark
              ? appColors.primaryText
              : appColors.whiteColor,
            borderColor: isDark ? appColors.darkBorder : appColors.border,
          },
        ]}
      >
        <TaxiDetails
          texiDetail={rideDetails}
          paddingHorizontal={windowHeight(12.5)}
          vehicleData={vehicleData}
        />
        {rideDetails?.service?.slug == "parcel" ||
          (rideDetails?.service?.slug == "fright" && (
            <View style={styles.rideDetailsView}>
              <Image
                source={{
                  uri: "",
                }}
                style={styles.cargoImg}
              />
              <Text style={styles.paragraphText}>
                {translateData.pendingDetailsCargo}
              </Text>
              {rideDetails?.service?.slug == "parcel" && (
                <>
                  <View
                    style={[styles.parcelView, { flexDirection: viewRTLStyle }]}
                  >
                    <Text style={styles.textStyle}>
                      {translateData.pendingReceiverName}
                    </Text>
                    <Text style={styles.textStyle}>
                      {translateData.kamleshChaiwala}
                    </Text>
                  </View>

                  <View
                    style={[
                      styles.dataContainer,
                      { flexDirection: viewRTLStyle },
                    ]}
                  >
                    <Text style={styles.textStyle}>
                      {translateData.pendingReceiverNo}
                    </Text>
                    <Text
                      style={{
                        color: appColors.primaryText,
                        fontFamily: appFonts.regular,
                      }}
                    >
                      +91 12345 67890
                    </Text>
                  </View>
                  <View
                    style={[
                      styles.dataContainer,
                      { flexDirection: viewRTLStyle },
                    ]}
                  >
                    <Text style={styles.textStyle}>
                      {translateData.pendingParcelWeight}
                    </Text>
                    <Text style={styles.textStyle}>1000KG</Text>
                  </View>
                </>
              )}
            </View>
          ))}
        <View
          style={{ alignItems: "center", marginVertical: windowHeight(12) }}
        >
          <SolidLine
            color={isDark ? appColors.solidBorder : appColors.lightGray}
            height={windowHeight(4)}
            width={windowWidth(500)}
          />
        </View>
        <BillDetails billDetail={rideDetails} />
      </View>
    </View>
  );
}
