import {
  View,
  ScrollView,
  TouchableOpacity,
  Text,
  ActivityIndicator,
  TextInput,
  Image,
} from 'react-native'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { Header, Button, notificationHelper } from '../../../commonComponents'
import appColors from '../../../theme/appColors'
import { Details } from '../component'
import { Bill } from '../../home/endRide/component'
import { Payment } from '../../home/endRide/component'
import { useNavigation, useTheme, useRoute } from '@react-navigation/native'
import appFonts from '../../../theme/appFonts'
import Icons from '../../../utils/icons/icons'
import OTPTextView from 'react-native-otp-textinput'
import { useDispatch, useSelector } from 'react-redux'
import {
  allpayment,
  rideDataGets,
  rideDataPut,
  rideStartData,
  userReview,
} from '../../../api/store/action'
import { useValues } from '../../../utils/context'
import styles from './styles'
import { CommonModal } from '../../../commonComponents/commonModal'
import {
  fontSizes,
  windowHeight,
  windowWidth,
} from '../../../theme/appConstant'
import { getValue } from '../../../utils/localstorage'
import { URL } from '../../../api/config'
import BottomSheet, {
  BottomSheetModal,
  BottomSheetView,
  BottomSheetModalProvider,
} from '@gorhom/bottom-sheet'
import { initializeApp } from 'firebase/app'
import { getFirestore, doc, onSnapshot } from 'firebase/firestore'
import { firebaseConfig } from '../../../../firebase'
import { PaymentRideInterface } from '../../../api/interface/walletInterface'
import { AppDispatch } from '../../../api/store'
import Calander from '../../../assets/icons/calander'
import { apiformatDates } from '../../../utils/functions'
import Images from '../../../utils/images/images'

const app = initializeApp(firebaseConfig)
const db = getFirestore(app)

export function PendingDetails() {
  const route = useRoute<any>()
  const [loading, setLoading] = useState<boolean>(false)
  const { item, vehicleDetail, status, rideStatus } = route.params
  const [otpModalVisible, setOtpModalVisible] = useState<boolean>(false)
  const [warning, setWarning] = useState<string>('')
  const [enteredOtp, setEnteredOtp] = useState<string>('')
  const dispatch = useDispatch<AppDispatch>()
  const { viewRtlStyle, textRtlStyle, isDark, rtl } = useValues()
  const { colors } = useTheme()
  const { translateData } = useSelector((state: any) => state.setting)
  const { zoneValue } = useSelector((state: any) => state.zoneUpdate)
  const navigation = useNavigation<any>()
  const [paymentMethod, setPaymentMethod] = useState<any>(null)
  const [paymentStatus, setpaymentStatus] = useState<any>()
  const [isConfirming, setIsConfirming] = useState<boolean>(false)
  const [completeLoading, setCompleteLoading] = useState<boolean>(false)
  const [loaderInvoice, setLoaderInvoice] = useState<boolean>(false)
  const bottomSheetReviewRef = useRef<BottomSheetModal>(null)
  const [isBottomSheetReviewOpen, setIsBottomSheetReviewOpen] =
    useState<boolean>(false)
  const [rating, setRating] = useState<number>(0)
  const [reviewText, setReviewText] = useState<string>('')

  useEffect(() => {
    if (!item?.id) return

    const rideId = String(item.id)
    const rideRef = doc(db, 'rides', rideId)

    const unsubscribe = onSnapshot(rideRef, docSnap => {
      if (docSnap.exists()) {
        const data = docSnap.data()

        setPaymentMethod(data.payment_method)
        setpaymentStatus(data.payment_status)
      } else {
      }
    })

    return () => unsubscribe()
  }, [item?.id])
  const reviewSubmit = () => {
    let payload: any = {
      ride_id: item?.id,
      rating: rating,
      description: reviewText,
    }

    dispatch(userReview(payload))
      .unwrap()
      .then((res: any) => {
        if (res?.id) {
          gotoReview()
          notificationHelper('', 'Review Placed Successfully', 'success')
          dispatch(rideDataGets())
          navigation.goBack()
        }
        setOtpModalVisible(false)
      })
  }

  const gotoPickup = () => {
    navigation.navigate('RideComplete', { rideData: item })
  }

  const gotoReview = () => {
    if (isBottomSheetReviewOpen) {
      bottomSheetReviewRef.current?.close()
      setIsBottomSheetReviewOpen(false)
    } else {
      bottomSheetReviewRef.current?.present()
      setIsBottomSheetReviewOpen(true)
    }
  }

  const gotoInvoice = async (rideData: any) => {
    setLoaderInvoice(true)
    const token = await getValue('token')
    const response = await fetch(
      `${URL}/api/ride/driver-invoice/${rideData?.invoice_id}`,
      {
        method: 'GET',
        headers: {
          'Content-Type': 'multipart/form-data',
          Accept: 'application/json',
          Authorization: `Bearer ${token}`,
        },
      },
    )

    if (response.status == 200) {
      setLoaderInvoice(false)

      navigation.navigate('PdfViewer', {
        pdfUrl: response?.url,
        token: token,
        rideNumber: rideData?.invoice_id,
      })
    } else {
      setLoaderInvoice(true)
    }
  }

  const gotoCompleteRental = () => {
    setCompleteLoading(true)
    dispatch(
      rideDataPut({
        data: {
          status: 'completed',
        },
        ride_id: item?.id,
      }),
    ).then(async (res: any) => {
      if (res?.payload?.ride_status?.slug == 'completed') {
        navigation.navigate('TabNav')
        dispatch(rideDataGets())
        notificationHelper('', 'Ride Complete', 'success')
        setCompleteLoading(false)
      }
    })
  }

  const gotoStart = () => {
    navigation.navigate('AcceptFare', { ride_Id: item?.id, ride_Details: item })
  }

  const gotoVerify = () => {
    navigation.navigate('OtpRide', { rideData: item, ride_Id: item?.id })
  }

  const handleCashReceived = () => {
    let payload: PaymentRideInterface = {
      ride_id: item?.id,
      payment_method: 'cash',
    }

    dispatch(allpayment(payload))
      .unwrap()
      .then(async (res: any) => { })
    setIsConfirming(true)
  }

  const handleConfirm = () => {
    notificationHelper(
      '',
      translateData?.youHaveReceivedcash,
      'success',
    )
    navigation.goBack()
    dispatch(rideDataGets())
  }

  const handleChange = (otp: string) => {
    setEnteredOtp(otp)
    if (otp.length == 5) {
      setWarning('')
    }
  }
  const closeModal = () => {
    setOtpModalVisible(false)
    setLoading(true)
    let payload: any = {
      ride_id: item?.id,
      otp: enteredOtp,
    }

    dispatch(rideStartData(payload))
      .unwrap()
      .then((res: any) => {
        setLoading(false)
      })
      .catch(() => {
        setLoading(false)
      })
  }

  const handleSheetChanges = useCallback((index: number) => { }, [])

  const handleStarPress = (selectedRating: number) => {
    setRating(selectedRating)
  }
  const formattedDate = apiformatDates(item.created_at)





  return (
    <View style={styles.main}>
      {item?.ride_status?.slug === 'completed' &&
        item?.payment_status === 'COMPLETED' ? (
        <Header
          title={`${rideStatus} Ride`}
          style={styles.gap}
          icon={
            item?.ride_status?.slug === 'completed' &&
            item?.payment_status === 'COMPLETED' && (
              <View>
                {loaderInvoice ? (
                  <ActivityIndicator size={'small'} color={appColors.primary} />
                ) : (
                  <Icons.Invoice color={colors.text} />
                )}
              </View>
            )
          }
          onPress={() => {
            if (
              item?.ride_status?.slug === 'completed' &&
              item?.payment_status === 'COMPLETED'
            ) {
              gotoInvoice(item)
            }
          }}
        />
      ) : (
        <Header title={`${rideStatus} Ride`} style={styles.gap} />
      )}

      <ScrollView showsVerticalScrollIndicator={false}>
        <>
          <Details rideDetails={item} vehicleDetail={vehicleDetail} />
          <View style={styles.completedMainView}>
            {status === 'completed' ? (
              <>
                <Bill rideDetails={item} />
                <Payment rideDetails={item} />
              </>
            ) : null}
          </View>

          <View style={styles.billMainView}>
            <View
              style={[
                styles.viewBill,
                {
                  backgroundColor: isDark ? colors.card : appColors.white,
                  borderColor: colors.border,
                },
              ]}
            >
              <View style={[styles.rideData]}>
                <View
                  style={[styles.carIdView, { flexDirection: viewRtlStyle }]}
                >
                  <View
                    style={[
                      styles.image,
                      { backgroundColor: colors.background },
                    ]}
                  >
                    {
                      item?.service?.service_type === 'ambulance' ?
                        <Image
                          source={Images.ambulance}
                          style={styles.carImage}
                        /> :
                        <Image
                          source={{ uri: item?.vehicle_type?.vehicle_image_url }}
                          style={styles.carImage}
                        />
                    }

                  </View>
                  <View>
                    <View style={[styles.tripTextContainer]}>
                      <View
                        style={{
                          flexDirection: viewRtlStyle,
                          alignItems: 'center',
                          justifyContent: 'space-between',

                          width: rtl ? null : '91%',

                        }}
                      >
                        <View
                          style={{
                            flexDirection: viewRtlStyle,
                            alignItems: 'center',
                            width: rtl ? null : '70%',
                          }}
                        >
                          <View
                            style={[
                              styles.category1,
                              { backgroundColor: colors.background },
                            ]}
                          >
                            <Text style={[styles.idNo, { color: colors.text }]}>
                              {item?.vehicle_type?.plate_number}
                            </Text>
                          </View>

                          <View style={[styles.category]}>
                            <Text
                              style={[styles.idNo, { color: appColors.approv }]}
                            >
                              {item?.service?.name}
                            </Text>
                          </View>
                        </View>
                        <Text
                          style={[
                            styles.tripCostText,
                            { textAlign: textRtlStyle, color: colors.text },
                          ]}
                        >
                          {zoneValue?.currency_symbol}
                          {item.total}
                        </Text>
                      </View>
                    </View>
                    <View
                      style={[styles.iconView, { flexDirection: viewRtlStyle }]}
                    >
                      <View
                        style={[
                          styles.viewIcon,
                          { flexDirection: viewRtlStyle },
                        ]}
                      >
                        <Calander />
                        <Text style={styles.date}>{formattedDate.date}</Text>
                      </View>
                      <View
                        style={[
                          styles.line,
                          { backgroundColor: colors.border },
                        ]}
                      />
                      <View
                        style={[
                          styles.viewIcon,
                          {
                            flexDirection: viewRtlStyle,
                            marginHorizontal: windowWidth(1),
                          },
                        ]}
                      >
                        <Icons.Clock />
                        <Text style={styles.date}>{formattedDate.time}</Text>
                      </View>
                    </View>
                  </View>
                </View>
              </View>

              <View
                style={[
                  styles.dashLine,
                  { backgroundColor: colors.background },
                ]}
              />

              <Text
                style={[
                  styles.rideText,
                  {
                    color: isDark ? appColors.white : appColors.primaryFont,
                    textAlign: textRtlStyle,
                  },
                ]}
              >
                {translateData.billSummary}
              </Text>
              <View
                style={[
                  styles.billBorder,
                  { borderBottomColor: colors.border },
                ]}
              />
              {item?.ride_fare > 0 && (
                <View
                  style={[
                    styles.platformContainer,
                    { flexDirection: viewRtlStyle },
                  ]}
                >
                  <Text style={[styles.text]}>{translateData?.basefare}</Text>
                  <Text
                    style={[
                      styles.text,
                      { color: isDark ? appColors.white : appColors.black },
                    ]}
                  >
                    {zoneValue?.currency_symbol}
                    {Number(item?.ride_fare).toFixed(2)}
                  </Text>
                </View>
              )}
              {item?.additional_distance_charge > 0 && (
                <View
                  style={[
                    styles.platformContainer,
                    { flexDirection: viewRtlStyle },
                  ]}
                >
                  <Text style={[styles.text]}>
                    {translateData?.additionalfare}
                  </Text>
                  <Text
                    style={[
                      styles.text,
                      { color: isDark ? appColors.white : appColors.black },
                    ]}
                  >
                    {zoneValue?.currency_symbol}
                    {Number(item?.additional_distance_charge).toFixed(2)}
                  </Text>
                </View>
              )}
              {item?.vehicle_rent > 0 && (
                <View
                  style={[
                    styles.platformContainer,
                    { flexDirection: viewRtlStyle },
                  ]}
                >
                  <Text style={[styles.text]}>
                    {translateData?.vehiclefare}
                  </Text>
                  <Text
                    style={[
                      styles.text,
                      {
                        color: isDark ? appColors.white : appColors.black,
                      },
                    ]}
                  >
                    {zoneValue?.currency_symbol}
                    {Number(item?.vehicle_rent).toFixed(2)}
                  </Text>
                </View>
              )}

              {item?.extra_charges?.length !== 0 && (
                <>
                  {item?.extra_charges?.map((ex, index) => (
                    <View
                      key={index}
                      style={[
                        styles.platformContainer,
                        { flexDirection: viewRtlStyle },
                      ]}
                    >
                      <Text style={[styles.text]}>{ex?.title}</Text>

                      <Text
                        style={[
                          styles.text,
                          {
                            color: isDark
                              ? appColors.white
                              : appColors.primaryFont,
                          },
                        ]}
                      >
                        {zoneValue?.currency_symbol}
                        {Number(ex?.amount).toFixed(2)}
                      </Text>
                    </View>
                  ))}
                </>
              )}
              {item?.driver_rent > 0 && (
                <View
                  style={[
                    styles.platformContainer,
                    { flexDirection: viewRtlStyle },
                  ]}
                >
                  <Text style={[styles.text]}>{translateData?.driverfare}</Text>
                  <Text
                    style={[
                      styles.text,
                      {
                        color: isDark ? appColors.white : appColors.black,
                      },
                    ]}
                  >
                    {zoneValue?.currency_symbol}
                    {Number(item?.driver_rent).toFixed(2)}
                  </Text>
                </View>
              )}
              {item?.additional_minute_charge > 0 && (
                <View
                  style={[
                    styles.platformContainer,
                    { flexDirection: viewRtlStyle },
                  ]}
                >
                  <Text style={[styles.text]}>{translateData?.timefare}</Text>
                  <Text style={[styles.text]}>
                    <Text
                      style={{
                        color: isDark ? appColors.white : appColors.black,
                      }}
                    >
                      {zoneValue?.currency_symbol}
                      {Number(item?.additional_minute_charge).toFixed(2)}
                    </Text>
                  </Text>
                </View>
              )}
              {item?.platform_fees > 0 && (
                <View
                  style={[
                    styles.platformContainer,
                    { flexDirection: viewRtlStyle },
                  ]}
                >
                  <Text style={[styles.text]}>
                    {translateData?.platfromfee}
                  </Text>
                  <Text
                    style={[
                      styles.text,
                      {
                        color: isDark ? appColors.white : appColors.primaryFont,
                      },
                    ]}
                  >
                    {zoneValue?.currency_symbol}
                    {Number(item?.platform_fees).toFixed(2)}
                  </Text>
                </View>
              )}
              {item?.tax > 0 && (
                <View
                  style={[
                    styles.platformContainer,
                    { flexDirection: viewRtlStyle },
                  ]}
                >
                  <Text style={[styles.text]}>{translateData?.tax}</Text>
                  <Text
                    style={[
                      styles.text,
                      {
                        color: isDark ? appColors.white : appColors.primaryFont,
                      },
                    ]}
                  >
                    {zoneValue?.currency_symbol}
                    <Text
                      style={{
                        color: isDark ? appColors.white : appColors.black,
                      }}
                    >
                      {Number(item?.tax).toFixed(2)}
                    </Text>
                  </Text>
                </View>
              )}
              {item?.commission > 0 && (
                <View
                  style={[styles.billView, { flexDirection: viewRtlStyle }]}
                >
                  <Text
                    style={{
                      fontFamily: appFonts.regular,
                      color: appColors.iconColor,
                    }}
                  >
                    {translateData?.Commision}
                  </Text>
                  <Text
                    style={[
                      styles.text,
                      {
                        color: isDark ? appColors.white : appColors.primaryFont,
                      },
                    ]}
                  >
                    {zoneValue?.currency_symbol}
                    {Number(item?.commission).toFixed(2)}
                  </Text>
                </View>
              )}
              {item?.driver_tips > 0 && (
                <View
                  style={[styles.billView, { flexDirection: viewRtlStyle }]}
                >
                  <Text
                    style={{
                      fontFamily: appFonts.regular,
                      color: appColors.iconColor,
                    }}
                  >
                    {translateData?.tip || 'Tip Amount'}
                  </Text>
                  <Text
                    style={[
                      styles.text,
                      {
                        color: isDark ? appColors.white : appColors.primaryFont,
                      },
                    ]}
                  >
                    {zoneValue?.currency_symbol}
                    {Number(item?.driver_tips).toFixed(2)}
                  </Text>
                </View>
              )}
              {item?.additional_weight_charge > 0 && (
                <View
                  style={[styles.billView, { flexDirection: viewRtlStyle }]}
                >
                  <Text
                    style={{
                      fontFamily: appFonts.regular,
                      color: appColors.iconColor,
                      fontSize: fontSizes.FONT3HALF1,
                    }}
                  >
                    {translateData?.additional_distance_charge}
                  </Text>
                  <Text style={[styles.text]}>
                    <Text
                      style={{
                        color: isDark ? appColors.white : appColors.black,
                      }}
                    >
                      {zoneValue?.currency_symbol}
                      {Number(item?.additional_weight_charge).toFixed(2)}
                    </Text>
                  </Text>
                </View>
              )}
              {item?.bid_extra_amount > 0 && (
                <View
                  style={[styles.billView, { flexDirection: viewRtlStyle }]}
                >
                  <Text
                    style={{
                      fontFamily: appFonts.regular,
                      color: appColors.iconColor,
                      fontSize: fontSizes.FONT3HALF1,
                    }}
                  >
                    {translateData?.bid_extra_amount}
                  </Text>
                  <Text style={[styles.text]}>
                    <Text
                      style={{
                        color: isDark ? appColors.white : appColors.black,
                      }}
                    >
                      {zoneValue?.currency_symbol}

                      {Number(item?.bid_extra_amount).toFixed(2)}
                    </Text>
                  </Text>
                </View>
              )}
              <View
                style={[
                  styles.billBorder,
                  { backgroundColor: colors.background },
                ]}
              />
              <View
                style={[
                  styles.billView,
                  { flexDirection: viewRtlStyle, marginTop: windowHeight(0.8) },
                ]}
              >
                <Text
                  style={{
                    fontFamily: appFonts.regular,
                    color: appColors.iconColor,
                    fontSize: fontSizes.FONT3HALF1,
                  }}
                >
                  {translateData?.total}
                </Text>
                <Text
                  style={{
                    fontFamily: appFonts.semiBold,
                    color: appColors.approv,
                    fontSize: fontSizes.FONT4,
                  }}
                >
                  {zoneValue?.currency_symbol}
                  {Number(item?.total).toFixed(2)}
                </Text>
              </View>
            </View>
          </View>

          <View style={styles.pendingView}>
            {item?.payment_status == 'PENDING' ? (
              <View style={{ marginBottom: windowHeight(3) }}></View>
            ) : (
              <View>
                <Payment rideDetails={item} />
              </View>
            )}
          </View>

          {item?.ride_status?.slug == 'completed' &&
            item?.payment_status == 'COMPLETED' && (
              <View style={{ marginTop: windowHeight(5) }}>
                {item?.driverReview == null && (
                  <Button
                    backgroundColor={isDark ? appColors.white : appColors.black}
                    color={isDark ? appColors.black : appColors.white}
                    title={translateData.reviewCustomer}
                    onPress={gotoReview}
                  />
                )}
              </View>
            )}
          <View style={styles.bottomView} />
        </>
      </ScrollView>
      <View style={styles.buttonView}>
        {item?.ride_status?.slug == 'accepted' && (
          <View
            style={{
              position: 'absolute',
              bottom: windowHeight(0),
              left: windowHeight(0),
              right: windowHeight(0),
              paddingVertical: windowHeight(3),
            }}
          >
            <Button
              backgroundColor={isDark ? appColors.white : appColors.black}
              color={isDark ? appColors.black : appColors.white}
              title={translateData.pickupCustomer}
              onPress={gotoStart}
            />
          </View>
        )}
        {item?.ride_status?.slug == 'arrived' && (
          <View
            style={{
              position: 'absolute',
              bottom: windowHeight(0),
              left: windowHeight(0),
              right: windowHeight(0),
              paddingVertical: windowHeight(3),
            }}
          >
            <Button
              backgroundColor={isDark ? appColors.white : appColors.black}
              color={isDark ? appColors.black : appColors.white}
              title={translateData.otpVerification}
              onPress={gotoVerify}
            />
          </View>
        )}
        {item?.ride_status?.slug == 'started' &&
          item?.service_category?.service_category_type != 'rental' && (
            <Button
              backgroundColor={isDark ? appColors.white : appColors.black}
              color={isDark ? appColors.black : appColors.white}
              title={translateData.trackRide}
              onPress={gotoPickup}
            />
          )}

        {item?.ride_status?.slug == 'started' &&
          item?.service_category?.service_category_type == 'rental' && (
            <Button
              backgroundColor={isDark ? appColors.white : appColors.black}
              color={isDark ? appColors.black : appColors.white}
              title={translateData?.completebtn}
              onPress={gotoCompleteRental}
              loading={completeLoading}
            />
          )}

        {item?.ride_status?.slug === 'completed' &&
          item?.payment_status === 'PENDING' && (
            <>
              {paymentMethod === 'cash' ? (
                isConfirming ? (
                  <Button
                    backgroundColor={isDark ? appColors.white : appColors.black}
                    color={isDark ? appColors.black : appColors.white}
                    title={translateData?.Confirm}
                    onPress={handleConfirm}
                  />
                ) : (
                  <Button
                    backgroundColor={isDark ? appColors.white : appColors.black}
                    color={isDark ? appColors.black : appColors.white}
                    title={translateData?.receivedCash}
                    onPress={handleCashReceived}
                  />
                )
              ) : paymentStatus === 'COMPLETED' ? (
                <Button
                  backgroundColor={isDark ? appColors.white : appColors.black}
                  color={isDark ? appColors.black : appColors.white}
                  title={translateData?.paymentReceived}
                  onPress={handleConfirm}
                />
              ) : (
                <View style={{ marginHorizontal: windowWidth(4) }}>
                  <View
                    style={{
                      flexDirection: 'row',
                      width: '100%',
                      backgroundColor: isDark
                        ? appColors.white
                        : appColors.black,
                      borderRadius: windowWidth(55),
                      alignItems: 'center',
                      justifyContent: 'center',
                      height: windowHeight(6),
                    }}
                  >
                    <Text
                      style={{
                        color: isDark ? appColors.black : appColors.white,
                        fontFamily: appFonts.medium,
                        marginHorizontal: windowWidth(2),
                      }}
                    >
                      {translateData?.waitPayemt}
                    </Text>
                    <ActivityIndicator size="large" color={appColors.white} />
                  </View>
                </View>
              )}
            </>
          )}
      </View>
      <BottomSheetModalProvider>
        <BottomSheetModal
          ref={bottomSheetReviewRef}
          index={1}
          snapPoints={['42%']}
          onChange={handleSheetChanges}
          onDismiss={() => setIsBottomSheetReviewOpen(false)}
          style={{ zIndex: 2 }}
          handleIndicatorStyle={{
            backgroundColor: appColors.primary,
            height: windowHeight(0.6),
            width: windowWidth(10),
            marginTop: windowHeight(0.2),
          }}
          containerStyle={{
            backgroundColor: isBottomSheetReviewOpen ? appColors.modelBg : null,
          }}
          backgroundStyle={{
            backgroundColor: colors.background,
          }}
        >
          <BottomSheetView style={styles.contentContainer}>
            <View>
              <View
                style={[
                  styles.rateview,
                  { backgroundColor: colors.card, borderColor: colors.border },
                ]}
              >
                <Text
                  style={[
                    styles.title,
                    {
                      color: isDark ? appColors.white : appColors.black,
                      textAlign: textRtlStyle,
                    },
                  ]}
                >
                  {translateData.rateaCustomer}
                </Text>

                <View>
                  <View
                    style={[styles.round, { backgroundColor: colors.text }]}
                  >
                    <Text
                      style={{
                        fontFamily: appFonts.semiBold,
                        fontSize: fontSizes.FONT5,
                        color: isDark ? appColors.black : appColors.white,
                      }}
                    >
                      {item?.rider?.name?.charAt(0)?.toUpperCase()}
                    </Text>
                  </View>
                  <Text
                    style={{
                      color: colors.text,
                      alignSelf: 'center',
                      fontFamily: appFonts.medium,
                      fontSize: fontSizes.FONT4,
                      marginVertical: windowHeight(1),
                      marginBottom: windowHeight(0.5),
                    }}
                  >
                    {item?.rider?.name}
                  </Text>
                  <Text
                    style={{
                      color: appColors.iconColor,
                      alignSelf: 'center',
                      fontFamily: appFonts.medium,
                      fontSize: fontSizes.FONT3HALF,
                    }}
                  >
                    {item?.rider?.email}
                  </Text>
                </View>

                <View
                  style={[
                    styles.boldLine,
                    { backgroundColor: colors.background },
                  ]}
                />
                <Text
                  style={[
                    styles.message,
                    {
                      color: colors.text,
                      textAlign: textRtlStyle,
                      marginBottom: windowHeight(2),
                      marginTop: 0,
                    },
                  ]}
                >
                  {translateData?.raterider}
                </Text>
                <View
                  style={[
                    styles.container,
                    {
                      flexDirection: viewRtlStyle,
                      borderColor: colors.border,
                      backgroundColor: colors.background,
                    },
                  ]}
                >
                  {[1, 2, 3, 4, 5].map(index => (
                    <TouchableOpacity
                      key={index}
                      onPress={() => handleStarPress(index)}
                      style={styles.starIcon}
                    >
                      {index <= rating ? (
                        <Icons.StarFill />
                      ) : (
                        <Icons.StarEmpty fill={colors.card} />
                      )}
                    </TouchableOpacity>
                  ))}

                  <View
                    style={[styles.ratingView, { flexDirection: viewRtlStyle }]}
                  >
                    <Text
                      style={[
                        styles.rating,
                        {
                          color: isDark
                            ? appColors.white
                            : appColors.primaryFont,
                        },
                      ]}
                    >
                      {rating}/5
                    </Text>
                  </View>
                </View>

                <Text
                  style={[
                    styles.message,
                    {
                      color: colors.text,
                      textAlign: textRtlStyle,
                      marginTop: windowHeight(2),
                    },
                  ]}
                >
                  {translateData.customMessage}
                </Text>

                <TextInput
                  style={[
                    styles.input,
                    {
                      backgroundColor: colors.card,
                      borderColor: colors.border,
                      color: isDark ? appColors.white : appColors.primaryFont,
                      textAlign: textRtlStyle,
                    },
                  ]}
                  placeholder={translateData.writeHere}
                  placeholderTextColor={appColors.secondaryFont}
                  multiline
                  numberOfLines={2}
                  value={reviewText}
                  onChangeText={setReviewText}
                />
              </View>
              <View
                style={{
                  width: '110%',
                  alignSelf: 'center',
                  marginTop: windowHeight(3),
                  marginBottom: windowHeight(3),
                }}
              >
                <Button
                  title={translateData.submit}
                  color={isDark ? appColors.black : appColors.white}
                  backgroundColor={colors.text}
                  onPress={reviewSubmit}
                />
              </View>
            </View>
          </BottomSheetView>
        </BottomSheetModal>
      </BottomSheetModalProvider>

      <CommonModal
        isVisible={otpModalVisible}
        closeModal={closeModal}
        onPress={closeModal}
        value={
          <View>
            <TouchableOpacity
              style={[styles.closeBtn, { flexDirection: viewRtlStyle }]}
              onPress={closeModal}
              activeOpacity={0.7}
            >
              <Icons.Close />
            </TouchableOpacity>
            <Text
              style={[
                styles.modalText,
                { color: isDark ? colors.text : appColors.primaryFont },
              ]}
            >
              {translateData.otpConfirm}
            </Text>
            <Text
              style={[
                styles.otpTitle,
                { textAlign: textRtlStyle },
                { color: isDark ? colors.text : appColors.primaryFont },
              ]}
            >
              {translateData.enterOTP}
            </Text>
            <OTPTextView
              containerStyle={[
                styles.otpContainer,
                { flexDirection: viewRtlStyle },
              ]}
              textInputStyle={[
                styles.otpInput,
                {
                  backgroundColor: isDark
                    ? colors.background
                    : appColors.graybackground,
                },
                { color: colors.text },
              ]}
              handleTextChange={handleChange}
              inputCount={4}
              keyboardType="numeric"
              tintColor="transparent"
              offTintColor="transparent"
            />
            <TouchableOpacity
              onPress={closeModal}
              style={styles.closeButton}
              activeOpacity={0.7}
            >
              <Button
                title={translateData.verify}
                color={appColors.white}
                onPress={closeModal}
                backgroundColor={appColors.primary}
                margin="0"
              />
            </TouchableOpacity>
          </View>
        }
      />
    </View>
  )
}
