import {
  View,
  Text,
  Image,
  TouchableOpacity,
  TouchableWithoutFeedback,
} from 'react-native'
import React, {
  useState,
  useImperativeHandle,
  forwardRef,
  useEffect,
} from 'react'
import Icons from '../../../../utils/icons/icons'
import styles from './styles'
import { useValues } from '../../../../utils/context'
import { useNavigation, useTheme } from '@react-navigation/native'
import appColors from '../../../../theme/appColors'
import {
  fontSizes,
  windowHeight,
  windowWidth,
} from '../../../../theme/appConstant'
import CalanderSmall from '../../../../assets/icons/caladerSmall'
import Clock from '../../../../assets/icons/clock'
import { useDispatch, useSelector } from 'react-redux'
import {
  acceptRequestValue,
  rejectRequestValue,
  rideDataGet,
  rideDataGets,
} from '../../../../api/store/action'
import { Button, notificationHelper } from '../../../../commonComponents'
import appFonts from '../../../../theme/appFonts'
import { ProgressBar } from '../../../../commonComponents/helper/progressBarHelper'
import { formatDates } from '../../../../utils/functions'
import useSmartLocation from '../../../../commonComponents/helper/locationHelper'
import Sound from 'react-native-sound'
import { initializeApp } from 'firebase/app'
import { firebaseConfig } from '../../../../../firebase'
import { AppDispatch } from '../../../../api/store'

const app = initializeApp(firebaseConfig)

export const UpcomingRide = forwardRef(function UpcomingRide(
  { ride, gotoRide, gotoInfo, selectDriver, onRideDeclined, handelCall }: any,
  ref,
) {
  const {
    textRtlStyle,
    viewRtlStyle,
    isDark,
    rtl,
    Google_Map_Key,
    notificationValue,
  } = useValues()
  const { colors } = useTheme()
  const { translateData, taxidoSettingData } = useSelector(
    (state: any) => state.setting,
  )
  const dispatch = useDispatch<AppDispatch>()
  const { zoneValue } = useSelector((state: any) => state.zoneUpdate)
  const { navigate } = useNavigation<any>()
  const { selfDriver } = useSelector((state: any) => state.account)
  const [declined, setDeclined] = useState<boolean>(false)
  const formattedDate = formatDates(ride?.created_at)
  const { currentLatitude, currentLongitude } = useSmartLocation()
  const [distance, setDistance] = useState<string>('')

  Sound.setCategory('Playback')

  const playRingtone = () => {
    const ringtone = new Sound(
      require('../../../../assets/ringtone/seatbelt.mp3'),
      error => {
        if (error) {
          return
        }

        ringtone.play(success => {
          if (success) {
          } else {
          }
          ringtone.release()
        })
      },
    )
  }

  const [loader, setLoader] = useState<boolean>(false)

  const acceptRide = (rideId: any) => {
    setLoader(true)

    const payload: any = {
      ride_request_id: rideId,
    }

    dispatch(acceptRequestValue(payload))
      .unwrap()
      .then(async res => {
        setLoader(false)
        if (res?.id) {
          setLoader(false)

          dispatch(rideDataGet(res?.id))
          const rideDetails = res
          if (
            rideDetails?.service_category?.service_category_type === 'rental'
          ) {
            dispatch(rideDataGets())
            notificationHelper(
              'Ride Accepted',
              'For More Details Check MyRides',
              'success',
            )
          } else {
            setLoader(false)

            if (ride?.service_category?.service_category_type === 'schedule') {
              dispatch(rideDataGets())
              if (notificationValue == true) {
                onRideDeclined()
              }
              notificationHelper('', translateData.rideScheduled, 'success')
            } else {
              playRingtone()
              onRideDeclined()
              navigate('AcceptFare', {
                ride_Id: rideDetails?.id,
                ride_Details: rideDetails,
              })
              dispatch(rideDataGets())
            }
          }
        } else {
          setLoader(false)

          notificationHelper('', translateData.somthingwentwroung, 'error')
        }
      })
      .catch(err => {
        setLoader(false)
      })
  }

  useImperativeHandle(ref, () => ({
    acceptRide,
  }))

  const acceptAmbulance = (rideId: any) => {
    onRideDeclined()
    const payload: any = {
      ride_request_id: rideId,
    }

    dispatch(acceptRequestValue(payload))
      .unwrap()
      .then(async res => {
        if (res?.id) {
          dispatch(rideDataGet(res?.id)).then(async (res: any) => {
            navigate('AmbulanceTrack', { rideData: res?.payload })
            dispatch(rideDataGets())
          })
        } else {
          notificationHelper('', res?.message, 'error')
        }
      })
      .catch(err => { })
  }

  const declineRide = async (rideId: any) => {
    onRideDeclined()
    const driverId = selfDriver?.id
    if (!rideId || !driverId) return
    setDeclined(true)
    const payload: any = {
      ride_request_id: rideId,
    }
    dispatch(rejectRequestValue(payload))
      .unwrap()
      .then(async res => { })
  }

  const calculateDrivingDistance = () => {
    const url = `https://maps.googleapis.com/maps/api/distancematrix/json?origins=${currentLatitude},${currentLongitude}&destinations=${ride?.location_coordinates[0]?.lat},${ride?.location_coordinates[0]?.lng}&mode=driving&units=metric&key=${Google_Map_Key}`

    fetch(url)
      .then(response => response.json())
      .then(data => {
        if (data.status === 'OK' && data.rows[0].elements[0].status === 'OK') {
          const distance = data.rows[0].elements[0].distance.text
          setDistance(distance)
        } else {
          setDistance('Error')
        }
      })
      .catch(error => {
        setDistance('Error')
      })
  }

  useEffect(() => {
    if (
      currentLatitude &&
      currentLongitude &&
      ride?.location_coordinates[0]?.lat &&
      ride?.location_coordinates[0]?.lng
    ) {
      calculateDrivingDistance()
    }
  }, [
    currentLatitude,
    currentLongitude,
    ride?.location_coordinates[0]?.lat,
    ride?.location_coordinates[0]?.lng,
  ])

  const endTime = ride?.end_time
  const startTime = ride?.start_time

  let formattedDate1 = ''
  let formattedTime1 = ''
  let formattedDate2 = ''
  let formattedTime2 = ''

  if (startTime) {
    const startDateObj = new Date(startTime.replace(' ', 'T'))
    const options: any = { day: 'numeric', month: 'long' }
    formattedDate1 = startDateObj.toLocaleDateString('en-GB', options)
    let hours = startDateObj.getHours()
    const ampm = hours >= 12 ? 'PM' : 'AM'
    hours = hours % 12 || 12
    formattedTime1 = `${hours} ${ampm}`
  }

  if (endTime) {
    const endDateObj = new Date(endTime.replace(' ', 'T'))
    const options: any = { day: 'numeric', month: 'long' }
    formattedDate2 = endDateObj.toLocaleDateString('en-GB', options)
    let hours = endDateObj.getHours()
    const ampm = hours >= 12 ? 'PM' : 'AM'
    hours = hours % 12 || 12
    formattedTime2 = `${hours} ${ampm}`
  }
  const declineRideInternal = () => {
    declineRide(ride?.id)
    if (onRideDeclined) onRideDeclined(ride?.id)
  }

  useImperativeHandle(ref, () => ({
    decline: declineRideInternal,
  }))

  const dateObj = ride?.createdAt?.seconds
    ? new Date(ride.createdAt.seconds * 1000)
    : new Date()

  // ✅ Format Date (Example: 15 Dec’2024)
  const rideDate = dateObj
    .toLocaleDateString('en-GB', {
      day: '2-digit',
      month: 'short',
      year: 'numeric',
    })
    .replace(',', '')
    .replace(/\s(\d{4})$/, '’$1') // Add apostrophe before year

  // ✅ Format Time (Example: 10:15 AM)
  const rideTime = dateObj.toLocaleTimeString('en-US', {
    hour: '2-digit',
    minute: '2-digit',
  })

  const biddingOf =
    taxidoSettingData?.cabbooking_values?.activation?.bidding == 0
  const biddingOn =
    taxidoSettingData?.cabbooking_values?.activation?.bidding == 1

  const isCabRide =
    ride?.service?.service_type === 'cab' &&
    ['ride', 'intercity'].includes(
      ride?.service_category?.service_category_type,
    ) &&
    biddingOf
  const isCabRide1 =
    ride?.service?.service_type === 'cab' &&
    ['ride', 'intercity'].includes(
      ride?.service_category?.service_category_type,
    ) &&
    biddingOn

  const service_category =
    ride?.service?.service_type === 'freight' ||
    ride?.service?.service_type === 'parcel' ||
    ride?.service_category?.service_category_type === 'schedule' ||
    ride?.service_category?.service_category_type === 'package'

  return (
    <TouchableWithoutFeedback>
      <View>
        <View
          style={[
            styles.main,
            {
              backgroundColor: colors.card,
              borderColor: isDark ? appColors.darkborder : appColors.loader,
              borderBottomWidth: biddingOn ? windowWidth(0.3) : 0,
              borderBottomRightRadius: biddingOn ? windowWidth(5) : 0,
              borderBottomLeftRadius: biddingOn ? windowWidth(5) : 0,
            },
          ]}
        >
          <View>
            <View
              style={{
                backgroundColor: isDark
                  ? appColors.primaryFont
                  : appColors.white,
                marginTop: windowHeight(1.5),
                marginBottom: windowHeight(0.3),
                marginHorizontal: windowWidth(2),
                justifyContent: 'space-between',
                alignItems: 'center',
                flexDirection: viewRtlStyle,
              }}
            >
              <View
                style={[
                  styles.ticket,
                  {
                    backgroundColor: isDark
                      ? appColors.bgDark
                      : appColors.lightGray,
                  },
                ]}
              >
                <Text
                  style={[
                    styles.rideNumber,
                    { color: isDark ? appColors.white : appColors.black },
                  ]}
                >
                  #{ride?.ride_number}
                </Text>
              </View>

              <View
                style={{
                  flexDirection: viewRtlStyle,
                  alignItems: 'center',
                  justifyContent: 'space-between',
                }}
              >
                <View
                  style={{ flexDirection: viewRtlStyle, alignItems: 'center' }}
                >
                  <Icons.CalanderBig />
                  <Text style={styles.date}>{rideDate}</Text>
                </View>

                <View
                  style={[styles.solidLine, { backgroundColor: appColors.iconColor, marginHorizontal: rtl && windowWidth(2) }]}
                />

                <View
                  style={{ flexDirection: viewRtlStyle, alignItems: 'center' }}
                >
                  <Icons.Clock />
                  <Text style={styles.date}>{rideTime}</Text>
                </View>
              </View>
            </View>

            <View
              style={[
                styles.line,
                {
                  backgroundColor: isDark
                    ? appColors.bgDark
                    : appColors.lightGray,
                },
              ]}
            />

            <View>
              <View
                style={[
                  styles.alignment,
                  {
                    flexDirection: viewRtlStyle,
                    alignItems: 'center',
                    paddingHorizontal: windowWidth(3),
                  },
                ]}
              >
                <View style={[styles.profile, { flexDirection: viewRtlStyle }]}>
                  {ride?.rider?.profile_image?.original_url ? (
                    <Image
                      source={{ uri: ride?.rider?.profile_image.original_url }}
                      style={styles.userimage}
                    />
                  ) : (
                    <View
                      style={[
                        styles.userimage,
                        styles.initialsCircle,
                        {
                          backgroundColor: isDark
                            ? appColors.white
                            : appColors.black,
                        },
                      ]}
                    >
                      <Text
                        style={{
                          fontSize: fontSizes.FONT4HALF,
                          color: isDark ? appColors.black : appColors.white,
                          fontFamily: appFonts.bold,
                        }}
                      >
                        {ride?.rider?.name?.charAt(0)?.toUpperCase()}
                      </Text>
                    </View>
                  )}
                  <View style={styles.rideContainer}>
                    <Text style={[styles.userName, { color: colors.text }]}>
                      {ride?.rider?.name}
                    </Text>
                    <View
                      style={[
                        styles.starContainer,
                        {
                          flexDirection: viewRtlStyle,
                          left: rtl ? windowHeight(4) : windowHeight(0.5),
                        },
                      ]}
                    >
                      {Array.from({ length: 5 }).map((_, index) => {
                        const fullStarThreshold = index + 1
                        const halfStarThreshold = index + 0.5
                        if (ride?.rider?.rating_count >= fullStarThreshold) {
                          return <Icons.RatingStar key={index} />
                        } else if (
                          ride?.rider?.rating_count >= halfStarThreshold
                        ) {
                          return <Icons.RatingHalfStar key={index} />
                        } else {
                          return <Icons.RatingEmptyStar key={index} />
                        }
                      })}
                      <Text
                        style={[
                          styles.text1,
                          {
                            color: isDark
                              ? appColors.white
                              : appColors.primaryFont,
                            left: windowWidth(1),
                          },
                        ]}
                      >
                        {ride?.rider?.rating_count}
                      </Text>
                      <Text
                        style={[
                          styles.text1,
                          {
                            color: isDark
                              ? appColors.white
                              : appColors.secondaryFont,
                            left: windowWidth(2),
                          },
                        ]}
                      >
                        ({ride?.rider?.reviews_count})
                      </Text>
                      {ride?.rider?.reviews_count > 0 && (
                        <>
                          <Text
                            style={[
                              styles.text1,
                              {
                                color: isDark
                                  ? appColors.white
                                  : appColors.secondaryFont,
                                left: windowWidth(2),
                              },
                            ]}
                          >
                            (
                          </Text>
                          <Text
                            style={[
                              styles.text1,
                              {
                                color: isDark
                                  ? appColors.white
                                  : appColors.secondaryFont,
                                left: windowWidth(2),
                              },
                            ]}
                          >
                            {ride?.rider?.reviews_count})
                          </Text>
                        </>
                      )}
                    </View>
                  </View>
                </View>
                <View style={styles.rate}>
                  <Text
                    style={[
                      styles.price,
                      { color: isDark ? appColors.white : appColors.black },
                    ]}
                  >
                    {zoneValue?.currency_symbol}
                    {ride?.total}
                  </Text>
                </View>
              </View>
              <View
                style={[
                  styles.line,
                  {
                    backgroundColor: isDark
                      ? appColors.bgDark
                      : appColors.lightGray,
                  },
                ]}
              />

              {ride?.service_category?.service_category_type === 'schedule' && (
                <View
                  style={[
                    styles.scheduleContainer,
                    {
                      flexDirection: viewRtlStyle,
                    },
                  ]}
                >
                  <View style={styles.containerSchedule}>
                    <Text style={styles.startDateText}>
                      {translateData.startDate}
                    </Text>
                    <View
                      style={[
                        styles.calanderSmall,
                        { flexDirection: viewRtlStyle },
                      ]}
                    >
                      <CalanderSmall />
                      <Text style={styles.formattedDateText}>
                        {' '}
                        {formattedDate.date}
                      </Text>
                    </View>
                  </View>
                  <View
                    style={[
                      styles.startContainer,
                      { borderColor: colors.border },
                    ]}
                  />
                  <View style={styles.containerSchedule}>
                    <Text style={styles.startTime}>
                      {translateData.startTime}
                    </Text>
                    <View
                      style={[
                        styles.scheduleClock,
                        { flexDirection: viewRtlStyle },
                      ]}
                    >
                      <Clock />
                      <Text style={styles.formattedDateText}>
                        {' '}
                        {formattedDate.time}
                      </Text>
                    </View>
                  </View>
                </View>
              )}
              <View>
                <View
                  style={[
                    styles.mainContainer,
                    {
                      flexDirection: viewRtlStyle,
                      width: '98%',
                      alignSelf: 'center',
                    },
                  ]}
                >
                  <View
                    style={{
                      flexDirection: viewRtlStyle,
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}
                  >
                    <View
                      style={[
                        styles.round,
                        {
                          backgroundColor: isDark
                            ? appColors.bgDark
                            : appColors.lightGray,
                        },
                      ]}
                    >
                      <Icons.location />
                    </View>

                    <Text
                      style={[
                        styles.pickup,
                        { color: colors.text, textAlign: textRtlStyle },
                      ]}
                    >
                      {ride?.locations?.[0]?.length > 32
                        ? ride.locations[0].substring(0, 32) + '...'
                        : ride?.locations?.[0]}
                    </Text>
                  </View>
                </View>
                {ride?.service?.service_type !== 'ambulance' && (
                  <View style={[styles.verticaldot, { alignSelf: rtl ? 'flex-end' : 'flex-start' }]} />
                )}
                {ride?.service?.service_type !== 'ambulance' && (
                  <View
                    style={[
                      styles.verticalBorder,
                      {
                        backgroundColor: isDark
                          ? appColors.darkborder
                          : appColors.lightGray,
                        alignSelf: rtl ? 'flex-start' : 'flex-end'
                      },
                    ]}
                  />
                )}

                {ride?.service?.service_type !== 'ambulance' && (
                  <>
                    <View
                      style={[
                        styles.round1,
                        {
                          borderColor: isDark
                            ? appColors.darkborder
                            : appColors.loader,
                          backgroundColor: isDark ? appColors.primaryFont : appColors.white,
                          alignSelf: rtl ? 'flex-start' : 'flex-end'
                        },
                      ]}
                    >
                      <Text
                        style={{
                          color: appColors.iconColor,
                          fontFamily: appFonts.medium,
                          fontSize: fontSizes.FONT3,
                        }}
                      >
                        {parseFloat(ride?.distance).toFixed(1)}
                      </Text>
                      <Text
                        style={{
                          color: appColors.iconColor,
                          fontFamily: appFonts.medium,
                          fontSize: fontSizes.FONT3,
                        }}
                      >
                        {ride?.distance_unit}
                      </Text>
                    </View>

                    <View
                      style={[
                        styles.mainContainer,
                        {
                          flexDirection: viewRtlStyle,
                          width: '98%',
                          alignSelf: 'center',
                        },
                      ]}
                    >
                      <View
                        style={{
                          flexDirection: viewRtlStyle,
                          alignItems: 'center',
                          justifyContent: 'center',
                        }}
                      >
                        <View
                          style={[
                            styles.round,
                            {
                              backgroundColor: isDark
                                ? appColors.bgDark
                                : appColors.lightGray,
                            },
                          ]}
                        >
                          <Icons.gps />
                        </View>
                        {ride?.service?.service_type !== 'ambulance' && (
                          <Text
                            style={[
                              styles.pickup,
                              { color: colors.text, textAlign: textRtlStyle },
                            ]}
                          >
                            {ride?.locations?.[ride?.locations.length - 1]
                              ?.length > 32
                              ? ride.locations[
                                ride.locations.length - 1
                              ].substring(0, 32) + '...'
                              : ride?.locations?.[ride?.locations.length - 1]}
                          </Text>
                        )}
                      </View>
                    </View>
                  </>
                )}
              </View>
            </View>
          </View>
          <View style={[styles.bottom, styles.alignment]}>
            {ride?.service?.service_type !== 'ambulance' && (
              <>
                {isCabRide ? (
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                    }}
                  >
                    <View
                      style={{ width: '50%', marginVertical: windowHeight(2) }}
                    >
                      <Button
                        title={translateData?.decline}
                        color={isDark ? appColors.white : appColors.black}
                        backgroundColor={
                          isDark ? appColors.bgDark : appColors.lightGray
                        }
                        onPress={handelCall}
                      />
                    </View>
                    <View
                      style={{ width: '50%', marginVertical: windowHeight(2) }}
                    >
                      <Button
                        title={translateData?.Accept}
                        onPress={() => {
                          acceptRide(ride?.id)
                        }}
                        backgroundColor={
                          isDark ? appColors.white : appColors.black
                        }
                        color={isDark ? appColors.black : appColors.white}
                        loading={loader}
                      />
                    </View>
                  </View>
                ) : (
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                    }}
                  >
                    <View
                      style={{ width: '50%', marginVertical: windowHeight(2) }}
                    >
                      {ride?.service?.service_type === 'freight' ||
                        ride?.service?.service_type === 'parcel' ||
                        ride?.service_category?.service_category_type ===
                        'schedule' ||
                        ride?.service_category?.service_category_type ===
                        'package' ? (
                        <View>
                          {biddingOf ? (
                            <Button
                              title={translateData?.decline}
                              color={isDark ? appColors.white : appColors.black}
                              backgroundColor={
                                isDark ? appColors.bgDark : appColors.lightGray
                              }
                              onPress={handelCall}
                            />
                          ) : null}
                        </View>
                      ) : (
                        <Button
                          title={translateData?.decline}
                          color={isDark ? appColors.white : appColors.black}
                          backgroundColor={
                            isDark ? appColors.bgDark : appColors.lightGray
                          }
                          onPress={handelCall}
                        />
                      )}
                    </View>
                    <View
                      style={{
                        width: '50%',
                        marginVertical: windowHeight(2),
                      }}
                    >
                      {isCabRide1 ? (
                        <Button
                          title={translateData?.accept}
                          onPress={() => gotoRide(ride)}
                          backgroundColor={
                            isDark ? appColors.white : appColors.black
                          }
                          color={isDark ? appColors.black : appColors.white}
                        />
                      ) : ride?.service_category?.service_category_type ===
                        'rental' ? (
                        <View>
                          {biddingOf ? (
                            <Button
                              title={translateData?.accept}
                              onPress={() => {
                                acceptRide(ride?.id)
                              }}
                              backgroundColor={
                                isDark ? appColors.white : appColors.black
                              }
                              color={isDark ? appColors.black : appColors.white}
                              loading={loader}
                            />
                          ) : (
                            <Button
                              title={translateData?.accept}
                              onPress={() => gotoInfo(ride)}
                              backgroundColor={
                                isDark ? appColors.white : appColors.black
                              }
                              color={isDark ? appColors.black : appColors.white}
                              loading={loader}
                            />
                          )}
                        </View>
                      ) : (
                        service_category &&
                        biddingOf && (
                          <View style={{ marginBottom: windowHeight(2) }}>
                            <Button
                              title={translateData?.accept}
                              onPress={() => {
                                acceptRide(ride?.id)
                              }}
                              backgroundColor={
                                isDark ? appColors.white : appColors.black
                              }
                              color={isDark ? appColors.black : appColors.white}
                              loading={loader}
                            />
                          </View>
                        )
                      )}
                    </View>
                  </View>
                )}
              </>
            )}
          </View>
          {service_category && (
            <View
              style={{
                flexDirection: viewRtlStyle,
                alignItems: 'center',
                justifyContent: 'space-between',
                marginHorizontal: windowWidth(4),
                marginTop: windowHeight(-2),
              }}
            >
              {biddingOn && (
                <TouchableOpacity
                  activeOpacity={0.7}
                  style={[
                    styles.rentalInfoContainer,
                    {
                      backgroundColor: isDark
                        ? appColors.white
                        : appColors.black,
                    },
                  ]}
                  onPress={() => {
                    if (
                      ride?.service?.service_type !== 'ambulance' &&
                      taxidoSettingData?.cabbooking_values?.activation
                        ?.bidding != 0
                    ) {
                      gotoRide(ride)
                    }
                  }}
                  disabled={
                    ride?.service?.service_type === 'ambulance' || biddingOf
                  }
                >
                  <Text
                    style={{
                      textAlign: 'center',
                      color: isDark ? appColors.black : appColors.white,
                      fontFamily: appFonts.medium,
                    }}
                  >
                    {translateData.viewDetails}
                  </Text>
                </TouchableOpacity>
              )}
              {biddingOn ? (
                <TouchableOpacity
                  activeOpacity={0.7}
                  style={[
                    styles.rentalInfoContainer,
                    {
                      backgroundColor: isDark
                        ? appColors.white
                        : appColors.black,
                    },
                  ]}
                  onPress={() => gotoInfo(ride)}
                >
                  <Text
                    style={[
                      styles.moreInfo,
                      { color: isDark ? appColors.black : appColors.white },
                    ]}
                  >
                    {translateData.moreInfo}
                  </Text>
                </TouchableOpacity>
              ) : null}
            </View>
          )}

          {ride?.service?.service_type === 'ambulance' && (
            <View
              style={[
                {
                  width: '100%',
                  marginTop: windowHeight(1),
                  marginBottom: windowHeight(2),
                },
              ]}
            >
              <Button
                onPress={() => acceptAmbulance(ride?.id)}
                title={translateData?.accept || 'Accept'}
                backgroundColor={isDark ? appColors.white : appColors.black}
                color={isDark ? appColors.black : appColors.white}
              />
            </View>
          )}
        </View>
        {biddingOf &&
          !declined &&
          ride?.service_category?.service_category_type !== 'rental' &&
          ride?.service?.service_type !== 'ambulance' && (
            <ProgressBar
              onComplete={() => {
                declineRide(ride?.id)
              }}
            />
          )}

        {ride?.service?.service_type === 'ambulance' && (
          <ProgressBar
            onComplete={() => {
              declineRide(ride?.id)
            }}
          />
        )}

        {ride?.service_category?.service_category_type === 'rental' && (
          <ProgressBar
            onComplete={() => {
              declineRide(ride?.id)
            }}
          />
        )}
      </View>
    </TouchableWithoutFeedback>
  )
})
