// import {
//   View,
//   Text,
//   Image,
//   TouchableOpacity,
//   BackHandler,
//   Platform,
// } from 'react-native'
// import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
// import { useTheme, useRoute, useFocusEffect } from '@react-navigation/native'
// import styles from './styles'
// import { BackButton, CustomRadioButton, notificationHelper } from '../../../commonComponents'
// import { TotalFair } from './component'
// import appColors from '../../../theme/appColors'
// import { DriverProfile } from '../../../commonComponents'
// import { Button } from '../../../commonComponents'
// import { useDispatch, useSelector } from 'react-redux'
// import { ArrivedMap } from '../../../commonComponents/maps/arrivedMap'
// import { useAppNavigation } from '../../../utils/navigation'
// import { cancelationDataGet, rideDataPut } from '../../../api/store/action'
// import {
//   BottomSheetModal,
//   BottomSheetModalProvider,
//   BottomSheetView,
//   BottomSheetBackdropProps,
// } from '@gorhom/bottom-sheet'
// import {
//   fontSizes,
//   windowHeight,
//   windowWidth,
// } from '../../../theme/appConstant'
// import appFonts from '../../../theme/appFonts'
// import Animated, {
//   useAnimatedStyle,
//   interpolate,
//   Extrapolate,
// } from 'react-native-reanimated'
// import { useValues } from '../../../utils/context'
// import { initializeApp } from 'firebase/app'
// import { getFirestore, doc, onSnapshot } from 'firebase/firestore'
// import { AppDispatch } from '../../../api/store'
// import { firebaseConfig } from '../../../../firebase'
// import { FAB } from 'react-native-paper'
// import Icons from '../../../utils/icons/icons'
// import NativeAdComponent from '../../../commonComponents/google/NativeAdCard'

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

// const CustomBackdrop = ({ animatedIndex, style }: BottomSheetBackdropProps) => {
//   const containerAnimatedStyle = useAnimatedStyle(() => ({
//     opacity: interpolate(
//       animatedIndex.value,
//       [-1, 0],
//       [0, 0.5],
//       Extrapolate.CLAMP,
//     ),
//   }))

//   const containerStyle = useMemo(
//     () => [style, containerAnimatedStyle],
//     [style, containerAnimatedStyle],
//   )

//   return <Animated.View style={containerStyle} pointerEvents="box-none" />
// }

// export function AcceptFare() {
//   const navigation = useAppNavigation()
//   const { colors } = useTheme()
//   const route = useRoute()
//   const { ride_Id }: any = route?.params
//   const { selfDriver } = useSelector((state: any) => state?.account)
//   const { canceldata } = useSelector((state: any) => state?.cancelationReason)
//   const [arrivedLoading, setArrivedLoading] = useState<boolean>(false)
//   const [cancelLoading, setCancelloading] = useState<boolean>(false)
//   const Driver_Id = selfDriver?.id
//   const [rideData, setRideData] = useState<null | any>(null)
//   const dispatch = useDispatch<AppDispatch>()
//   const ambulanceRef = useRef<BottomSheetModal>(null)
//   const cancelReasonRef = useRef<BottomSheetModal>(null)
//   const snapPoints = useMemo(() => [Platform.OS === 'ios' ? '43%' : '41%'], [])
//   const snapCancelReason = useMemo(() => ['40%'], [])
//   const { isDark, viewRtlStyle } = useValues()
//   const [cancelationreason, setCancelationReason] = useState<any>(null)
//   const [selectedId, setSelectedId] = useState<null>(null)
//   const [showActions, setShowActions] = useState<boolean>(false)
//   const { translateData, taxidoSettingData } = useSelector((state: any) => state.setting)

//   useFocusEffect(
//     useCallback(() => {
//       const backAction = () => {
//         navigation.navigate('Home')
//         return true
//       }
//       const backHandler = BackHandler.addEventListener(
//         'hardwareBackPress',
//         backAction,
//       )
//       return () => backHandler.remove()
//     }, [navigation]),
//   )

//   const renderBackdrop = useCallback(
//     (props: BottomSheetBackdropProps) => <CustomBackdrop {...props} />,
//     [],
//   )

//   useEffect(() => {
//     const ride_start = 'after'
//     dispatch(cancelationDataGet({ ride_start }))
//   }, [cancelReasonRef])

//   useEffect(() => {
//     if (!ride_Id) return

//     const unsub = onSnapshot(
//       doc(db, 'rides', ride_Id.toString()),
//       docSnap => {
//         if (docSnap.exists()) {
//           const data: any = docSnap.data()

//           setRideData(data)

//           if (data?.ride_status?.slug === 'cancelled') {
//             navigation.goBack()
//           }
//         } else {
//           setRideData(null)
//         }
//       },
//       error => { },
//     )

//     return () => unsub()
//   }, [ride_Id])

//   const gotoPickup = async () => {
//     setArrivedLoading(true)
//     dispatch(
//       rideDataPut({
//         data: {
//           status: 'arrived',
//         },
//         ride_id: ride_Id,
//       }),
//     ).then(async (res: any) => {
//       navigation.navigate('OtpRide', { rideData: rideData, ride_Id: ride_Id })
//       setArrivedLoading(false)
//     })
//   }

//   const cancelOpen = () => {
//     ambulanceRef.current?.close()
//     cancelReasonRef.current?.present()
//   }

//   const cancelRide = () => {
//     setCancelloading(true)
//     dispatch(
//       rideDataPut({
//         data: {
//           status: 'cancelled',
//           cancellation_reason: cancelationreason,
//         },
//         ride_id: ride_Id,
//       }),
//     )
//       .then(async (res: any) => {
//         setCancelloading(false)
//         if (res?.payload?.ride_status?.slug == 'cancelled') {
//           cancelReasonRef.current?.close()
//           navigation.navigate('TabNav')
//           notificationHelper('', 'Ride Cancelled', 'error')
//         }
//       })
//       .catch((error: any) => {
//         setCancelloading(true)
//         notificationHelper('', error, 'error')
//       })
//   }

//   useEffect(() => {
//     ambulanceRef.current?.present()
//   }, [])

//   const handleSelect = (item: any) => {
//     if (selectedId === item?.id) {
//       setCancelationReason(item)
//       setSelectedId(null)
//     } else {
//       setCancelationReason(item)
//       setSelectedId(item?.id)
//     }
//   }

//   const gotoOtherMap = (maptype: any) => {
//     navigation.navigate('MapWebView', {
//       lat: rideData?.location_coordinates?.[
//         rideData?.location_coordinates?.length - 1
//       ]?.lat,
//       lng: rideData?.location_coordinates?.[
//         rideData?.location_coordinates?.length - 1
//       ]?.lng,
//       type: maptype,
//     })
//   }
//           const activeItems = canceldata?.data?.filter(
//   (item: any) => item.status === 1
// );

//   return (
//     <BottomSheetModalProvider>
//       <View style={styles.container}>
//         <View style={styles.mapSection}>
//           <ArrivedMap
//             Pickuplocation={rideData?.location_coordinates[0]}
//             driverId={Driver_Id}
//           />
//         </View>
//         <View style={styles.backButton}>
//           <BackButton />
//         </View>
//         <FAB
//           icon={Icons.Map}
//           style={[
//             styles.fab,
//             {
//               backgroundColor: isDark
//                 ? appColors.darkThemeSub
//                 : appColors.white,
//             },
//           ]}
//           onPress={() => setShowActions(!showActions)}
//         />
//         {showActions && (
//           <>
//             <FAB
//               icon={Icons.GoogleMap}
//               style={[
//                 styles.fabMini,
//                 {
//                   backgroundColor: isDark
//                     ? appColors.darkThemeSub
//                     : appColors.white,
//                 },
//                 { bottom: '58.5%' },
//               ]}
//               onPress={() => gotoOtherMap('google')}
//             />
//             <FAB
//               icon={Icons.Wazemap}
//               style={[
//                 styles.fabMini,
//                 {
//                   backgroundColor: isDark
//                     ? appColors.darkThemeSub
//                     : appColors.white,
//                 },
//                 { bottom: '47%' },
//               ]}
//               onPress={() => gotoOtherMap('waze')}
//             />
//             <FAB
//               icon={Icons.BingMap}
//               style={[
//                 styles.fabMini,
//                 {
//                   backgroundColor: isDark
//                     ? appColors.darkThemeSub
//                     : appColors.white,
//                 },
//                 { bottom: '38.5%' },
//               ]}
//               onPress={() => gotoOtherMap('bing')}
//             />
//           </>
//         )}

//         <BottomSheetModal
//           ref={ambulanceRef}
//           index={0}
//           snapPoints={snapPoints}
//           enablePanDownToClose={false}
//           handleIndicatorStyle={{
//             width: '13%',
//             backgroundColor: appColors.primary,
//           }}
//           backdropComponent={renderBackdrop}
//           backgroundStyle={{
//             backgroundColor: isDark ? appColors.bgDark : appColors.white,
//           }}
//         >
//           <BottomSheetView>
//             <View
//               style={[
//                 styles.additionalSection,
//                 { backgroundColor: colors.card, borderColor: colors.border },
//               ]}
//             >
//               <DriverProfile
//                 iconColor={appColors.primary}
//                 backgroundColor={appColors.graybackground}
//                 borderRadius={windowHeight(25)}
//                 showInfoIcon={true}
//                 userDetails={rideData?.rider}
//                 rideDetails={rideData}
//                 width={'85%'}
//                 otpsheet={true}
//               />
//             </View>

//             {taxidoSettingData?.cabbooking_values?.ads?.native_enable == 1 && (
//               <NativeAdComponent heights={windowHeight(25)} />
//             )}
//             <View
//               style={{
//                 flexDirection: viewRtlStyle,
//                 alignItems: 'center',
//                 justifyContent: 'space-between',
//                 marginVertical: windowHeight(2),
//               }}
//             >
//               <View style={{ marginBottom: windowHeight(2), width: '50%' }}>
//                 <Button
//                   title={translateData.cancelTextT}
//                   backgroundColor={
//                     isDark ? appColors.primaryFont : appColors.lightGray
//                   }
//                   color={isDark ? appColors.white : appColors.black}
//                   onPress={cancelOpen}
//                 />
//               </View>
//               <View style={{ marginBottom: windowHeight(2), width: '50%' }}>
//                 <Button
//                   title={translateData.arrived}
//                   backgroundColor={isDark ? appColors.white : appColors.black}
//                   color={isDark ? appColors.black : appColors.white}
//                   onPress={gotoPickup}
//                   loading={arrivedLoading}
//                 />
//               </View>
//             </View>
//           </BottomSheetView>
//         </BottomSheetModal>

//         <BottomSheetModal
//           ref={cancelReasonRef}
//           index={1}
//           snapPoints={snapCancelReason}
//           enablePanDownToClose={true}
//           onDismiss={() => {
//             ambulanceRef.current?.present()
//           }}
//           handleIndicatorStyle={{
//             backgroundColor: appColors.primary,
//             height: windowHeight(0.6),
//             width: windowWidth(10),
//             marginTop: windowHeight(0.2),
//           }}
//           containerStyle={{ borderRadius: windowWidth(5) }}
//           backgroundStyle={{
//             backgroundColor: isDark ? appColors.primaryFont : appColors.white,
//           }}
//         >
//           <BottomSheetView >
//           <View style={{ width: '90%', alignSelf: 'center', borderWidth: windowWidth(0.3), paddingVertical: windowHeight(2), borderColor: isDark ? appColors.darkborder : appColors.border, marginHorizontal: windowWidth(5), marginTop: windowHeight(2), borderRadius: windowWidth(5) }}>

//             <Text
//               style={{
//                 textAlign: 'left',
//                 fontFamily: appFonts.semiBold,
//                 fontSize: fontSizes.FONT4,
//                 marginBottom: windowHeight(2),
//                 color: isDark ? appColors.darkText : appColors.black,
//                 marginHorizontal: windowWidth(5)
//               }}
//             >
//               {translateData?.whyyouWanttoCancel}
//             </Text>

// {activeItems?.map((item: any, index: number) => {
//   const isLastItem = index === activeItems.length - 1;

//   return (
//     <View key={item?.id ?? index}>
//       <View
//         style={{
//           flexDirection: 'row',
//           alignItems: 'center',
//           justifyContent: 'space-between',
//         }}
//       >
//         <TouchableOpacity
//           onPress={() => handleSelect(item)}
//           style={{
//             flexDirection: 'row',
//             alignItems: 'center',
//             backgroundColor:isDark
//                 ? appColors.primaryFont
//                 : appColors.white,
//             padding: windowHeight(1.5),
//             borderRadius: windowHeight(0.8),
//             flex: 1,
//           }}
//         >
//           <View
//             style={{
//               height: windowHeight(5),
//               width: windowHeight(5),
//               borderRadius: windowWidth(5),
//               borderWidth: windowWidth(0.45),
//               borderColor: colors.border,
//               alignItems: 'center',
//               justifyContent: 'center',
//             }}
//           >
//             <Image
//               source={{ uri: item?.icon_image_url }}
//               style={{
//                 height: windowHeight(2.5),
//                 width: windowHeight(2.5),
//               }}
//               resizeMode="contain"
//             />
//           </View>

//           <Text
//             style={{
//               fontFamily: appFonts.regular,
//               color: isDark ? appColors.darkText : appColors.black,
//               marginHorizontal: windowWidth(4),
//             }}
//           >
//             {item?.title}
//           </Text>
//         </TouchableOpacity>

//         <CustomRadioButton
//           selected={selectedId === item?.id}
//         />
//       </View>

//       {!isLastItem && (
//         <View
//           style={{
//             height: windowHeight(0.6),
//             width: '100%',
//             backgroundColor: colors.background,
//           }}
//         />
//       )}
//     </View>
//   );
// })}

//               </View>

//             <View style={{ marginTop: windowHeight(3) }}>
//               <Button
//                 title={translateData.confirm}
//                 backgroundColor={colors.text}
//                 color={isDark ? appColors.black : appColors.white}
//                 onPress={cancelRide}
//                 loading={cancelLoading}
//               />
//             </View>
//           </BottomSheetView>
//         </BottomSheetModal>
//       </View>
//     </BottomSheetModalProvider>
//   )
// }

import {
  View,
  Text,
  Image,
  TouchableOpacity,
  BackHandler,
  Platform,
} from 'react-native'
import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
import { useTheme, useRoute, useFocusEffect } from '@react-navigation/native'
import styles from './styles'
import {
  BackButton,
  CustomRadioButton,
  notificationHelper,
} from '../../../commonComponents'
import appColors from '../../../theme/appColors'
import { DriverProfile } from '../../../commonComponents'
import { Button } from '../../../commonComponents'
import { useDispatch, useSelector } from 'react-redux'
import { ArrivedMap } from '../../../commonComponents/maps/arrivedMap'
import { useAppNavigation } from '../../../utils/navigation'
import { cancelationDataGet, rideDataPut } from '../../../api/store/action'
import {
  BottomSheetModal,
  BottomSheetModalProvider,
  BottomSheetView,
  BottomSheetBackdropProps,
} from '@gorhom/bottom-sheet'
import {
  fontSizes,
  windowHeight,
  windowWidth,
} from '../../../theme/appConstant'
import appFonts from '../../../theme/appFonts'
import Animated, {
  useAnimatedStyle,
  interpolate,
  Extrapolate,
} from 'react-native-reanimated'
import { useValues } from '../../../utils/context'
import { initializeApp } from 'firebase/app'
import { getFirestore, doc, onSnapshot } from 'firebase/firestore'
import { AppDispatch } from '../../../api/store'
import { firebaseConfig } from '../../../../firebase'
import { FAB } from 'react-native-paper'
import Icons from '../../../utils/icons/icons'
import NativeAdComponent from '../../../commonComponents/google/NativeAdCard'

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

const CustomBackdrop = ({ animatedIndex, style }: BottomSheetBackdropProps) => {
  const containerAnimatedStyle = useAnimatedStyle(() => ({
    opacity: interpolate(
      animatedIndex.value,
      [-1, 0],
      [0, 0.5],
      Extrapolate.CLAMP,
    ),
  }))

  const containerStyle = useMemo(
    () => [style, containerAnimatedStyle],
    [style, containerAnimatedStyle],
  )

  return <Animated.View style={containerStyle} pointerEvents="box-none" />
}

export function AcceptFare() {
  const navigation = useAppNavigation()
  const { colors } = useTheme()
  const route = useRoute()
  const { ride_Id }: any = route?.params
  const { selfDriver } = useSelector((state: any) => state?.account)
  const { canceldata } = useSelector((state: any) => state?.cancelationReason)
  const [arrivedLoading, setArrivedLoading] = useState<boolean>(false)
  const [cancelLoading, setCancelloading] = useState<boolean>(false)
  const Driver_Id = selfDriver?.id
  const [rideData, setRideData] = useState<null | any>(null)
  const dispatch = useDispatch<AppDispatch>()
  const ambulanceRef = useRef<BottomSheetModal>(null)
  const cancelReasonRef = useRef<BottomSheetModal>(null)
  const snapPoints = useMemo(() => [Platform.OS === 'ios' ? '43%' : '41%'], [])
  const snapCancelReason = useMemo(() => ['40%'], [])
  const { isDark, viewRtlStyle, rtl } = useValues()
  const [cancelationreason, setCancelationReason] = useState<any>(null)
  const [selectedId, setSelectedId] = useState<null>(null)
  const [showActions, setShowActions] = useState<boolean>(false)
  const { translateData, taxidoSettingData } = useSelector(
    (state: any) => state.setting,
  )
  const isArrivingRef = useRef(false)

  useFocusEffect(
    useCallback(() => {
      const backAction = () => {
        navigation.navigate('Home')
        return true
      }
      const backHandler = BackHandler.addEventListener(
        'hardwareBackPress',
        backAction,
      )
      return () => backHandler.remove()
    }, [navigation]),
  )

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => <CustomBackdrop {...props} />,
    [],
  )

  useEffect(() => {
    const ride_start = 'after'
    dispatch(cancelationDataGet({ ride_start }))
  }, [cancelReasonRef])

  useEffect(() => {
    if (!ride_Id) return

    const unsub = onSnapshot(doc(db, 'rides', ride_Id.toString()), docSnap => {
      if (!docSnap.exists()) return

      const data = docSnap.data()
      setRideData(data)

      if (data?.ride_status?.slug === 'cancelled' && !isArrivingRef.current) {
        navigation.navigate('Home')
      }
    })

    return () => unsub()
  }, [ride_Id])

  const gotoPickup = async () => {
    if (arrivedLoading) return

    isArrivingRef.current = true
    setArrivedLoading(true)

    try {
      const res = await dispatch(
        rideDataPut({
          data: { status: 'arrived' },
          ride_id: ride_Id,
        }),
      )

      if (res?.payload?.ride_status?.slug === 'arrived') {
        navigation.navigate('OtpRide', {
          rideData: rideData,
          ride_Id: ride_Id,
        })
      } else {
        isArrivingRef.current = false
      }
    } catch (e) {
      isArrivingRef.current = false
    } finally {
      setArrivedLoading(false)
    }
  }

  const cancelOpen = () => {
    ambulanceRef.current?.close()
    cancelReasonRef.current?.present()
  }

  const cancelRide = () => {
    setCancelloading(true)
    dispatch(
      rideDataPut({
        data: {
          status: 'cancelled',
          cancellation_reason: cancelationreason,
        },
        ride_id: ride_Id,
      }),
    )
      .then(async (res: any) => {
        setCancelloading(false)
        if (res?.payload?.ride_status?.slug == 'cancelled') {
          cancelReasonRef.current?.close()
          navigation.navigate('TabNav')
          notificationHelper('', 'Ride Cancelled', 'error')
        }
      })
      .catch((error: any) => {
        setCancelloading(true)
        notificationHelper('', error, 'error')
      })
  }

  useEffect(() => {
    ambulanceRef.current?.present()
  }, [])

  const handleSelect = (item: any) => {
    if (selectedId === item?.id) {
      setCancelationReason(item)
      setSelectedId(null)
    } else {
      setCancelationReason(item)
      setSelectedId(item?.id)
    }
  }

  const gotoOtherMap = (maptype: any) => {
    navigation.navigate('MapWebView', {
      lat: rideData?.location_coordinates?.[
        rideData?.location_coordinates?.length - 1
      ]?.lat,
      lng: rideData?.location_coordinates?.[
        rideData?.location_coordinates?.length - 1
      ]?.lng,
      type: maptype,
    })
  }
  const activeItems = canceldata?.data?.filter(
    (item: any) => item?.status === 1,
  )

  return (
    <BottomSheetModalProvider>
      <View style={styles.container}>
        <View style={styles.mapSection}>
          <ArrivedMap
            Pickuplocation={rideData?.location_coordinates[0]}
            driverId={Driver_Id}
          />
        </View>
        <View style={styles.backButton}>
          <BackButton />
        </View>
        <FAB
          icon={Icons.Map}
          style={[
            styles.fab,
            {
              backgroundColor: isDark
                ? appColors.darkThemeSub
                : appColors.white,
            },
          ]}
          onPress={() => setShowActions(!showActions)}
        />
        {showActions && (
          <>
            <FAB
              icon={Icons.GoogleMap}
              style={[
                styles.fabMini,
                {
                  backgroundColor: isDark
                    ? appColors.darkThemeSub
                    : appColors.white,
                },
                { bottom: '58.5%' },
              ]}
              onPress={() => gotoOtherMap('google')}
            />
            <FAB
              icon={Icons.Wazemap}
              style={[
                styles.fabMini,
                {
                  backgroundColor: isDark
                    ? appColors.darkThemeSub
                    : appColors.white,
                },
                { bottom: '47%' },
              ]}
              onPress={() => gotoOtherMap('waze')}
            />
            <FAB
              icon={Icons.BingMap}
              style={[
                styles.fabMini,
                {
                  backgroundColor: isDark
                    ? appColors.darkThemeSub
                    : appColors.white,
                },
                { bottom: '38.5%' },
              ]}
              onPress={() => gotoOtherMap('bing')}
            />
          </>
        )}

        <BottomSheetModal
          ref={ambulanceRef}
          index={0}
          snapPoints={snapPoints}
          enablePanDownToClose={false}
          handleIndicatorStyle={{
            width: '13%',
            backgroundColor: appColors.primary,
          }}
          backdropComponent={renderBackdrop}
          backgroundStyle={{
            backgroundColor: isDark ? appColors.bgDark : appColors.white,
          }}
        >
          <BottomSheetView>
            <View
              style={[
                styles.additionalSection,
                { backgroundColor: colors.card, borderColor: colors.border },
              ]}
            >
              <DriverProfile
                iconColor={appColors.primary}
                backgroundColor={appColors.graybackground}
                borderRadius={windowHeight(25)}
                showInfoIcon={true}
                userDetails={rideData?.rider}
                rideDetails={rideData}
                width={rtl ? '95%' : '85%'}
                otpsheet={true}
              />
            </View>

            {taxidoSettingData?.cabbooking_values?.ads?.native_enable == 1 && (
              <NativeAdComponent heights={windowHeight(25)} />
            )}
            <View
              style={{
                flexDirection: viewRtlStyle,
                alignItems: 'center',
                justifyContent: 'space-between',
                marginVertical: windowHeight(2),
              }}
            >
              <View style={{ marginBottom: windowHeight(2), width: '50%' }}>
                <Button
                  title={translateData.cancelTextT}
                  backgroundColor={
                    isDark ? appColors.primaryFont : appColors.lightGray
                  }
                  color={isDark ? appColors.white : appColors.black}
                  onPress={cancelOpen}
                />
              </View>
              <View style={{ marginBottom: windowHeight(2), width: '50%' }}>
                <Button
                  title={translateData.arrived}
                  backgroundColor={isDark ? appColors.white : appColors.black}
                  color={isDark ? appColors.black : appColors.white}
                  onPress={gotoPickup}
                  loading={arrivedLoading}
                />
              </View>
            </View>
          </BottomSheetView>
        </BottomSheetModal>

        <BottomSheetModal
          ref={cancelReasonRef}
          index={1}
          snapPoints={snapCancelReason}
          enablePanDownToClose={true}
          onDismiss={() => {
            ambulanceRef.current?.present()
          }}
          handleIndicatorStyle={{
            backgroundColor: appColors.primary,
            height: windowHeight(0.6),
            width: windowWidth(10),
            marginTop: windowHeight(0.2),
          }}
          containerStyle={{ borderRadius: windowWidth(5) }}
          backgroundStyle={{
            backgroundColor: isDark ? appColors.primaryFont : appColors.white,
          }}
        >
          <BottomSheetView>
            <View
              style={{
                width: '90%',
                alignSelf: 'center',
                borderWidth: windowWidth(0.3),
                paddingVertical: windowHeight(2),
                borderColor: isDark ? appColors.darkborder : appColors.border,
                marginHorizontal: windowWidth(5),
                marginTop: windowHeight(2),
                borderRadius: windowWidth(5),
              }}
            >
              <Text
                style={{
                  textAlign: 'left',
                  fontFamily: appFonts.semiBold,
                  fontSize: fontSizes.FONT4,
                  marginBottom: windowHeight(2),
                  color: isDark ? appColors.darkText : appColors.black,
                  marginHorizontal: windowWidth(5),
                }}
              >
                {translateData?.whyyouWanttoCancel}
              </Text>

              {activeItems?.map((item: any, index: number) => {
                const isLastItem = index === activeItems.length - 1

                return (
                  <View key={item?.id ?? index}>
                    <View
                      style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                      }}
                    >
                      <TouchableOpacity
                        onPress={() => handleSelect(item)}
                        style={{
                          flexDirection: 'row',
                          alignItems: 'center',
                          backgroundColor: isDark
                            ? appColors.primaryFont
                            : appColors.white,
                          padding: windowHeight(1.5),
                          borderRadius: windowHeight(0.8),
                          flex: 1,
                        }}
                      >
                        <View
                          style={{
                            height: windowHeight(5),
                            width: windowHeight(5),
                            borderRadius: windowWidth(5),
                            borderWidth: windowWidth(0.45),
                            borderColor: colors.border,
                            alignItems: 'center',
                            justifyContent: 'center',
                          }}
                        >
                          <Image
                            source={{ uri: item?.icon_image_url }}
                            style={{
                              height: windowHeight(2.5),
                              width: windowHeight(2.5),
                            }}
                            resizeMode="contain"
                          />
                        </View>

                        <Text
                          style={{
                            fontFamily: appFonts.regular,
                            color: isDark
                              ? appColors.darkText
                              : appColors.black,
                            marginHorizontal: windowWidth(4),
                          }}
                        >
                          {item?.title}
                        </Text>
                      </TouchableOpacity>

                      <CustomRadioButton selected={selectedId === item?.id} />
                    </View>

                    {!isLastItem && (
                      <View
                        style={{
                          height: windowHeight(0.6),
                          width: '100%',
                          backgroundColor: colors.background,
                        }}
                      />
                    )}
                  </View>
                )
              })}
            </View>

            <View style={{ marginTop: windowHeight(3) }}>
              <Button
                title={translateData.confirm}
                backgroundColor={colors.text}
                color={isDark ? appColors.black : appColors.white}
                onPress={cancelRide}
                loading={cancelLoading}
              />
            </View>
          </BottomSheetView>
        </BottomSheetModal>
      </View>
    </BottomSheetModalProvider>
  )
}
