import {
  View,
  Text,
  Platform,
  PermissionsAndroid,
  StyleSheet,
  BackHandler,
  Modal,
  TouchableOpacity,
  TextInput,
} from 'react-native'
import React, { useState, useEffect, useRef, useCallback } from 'react'
import {
  useNavigation,
  useTheme,
  useRoute,
  useFocusEffect,
} from '@react-navigation/native'
import { useDispatch, useSelector } from 'react-redux'
import {
  rideDataGets,
  rideDataPut,
  selfDriverData,
} from '../../../api/store/action'
import styles from './styles'
import commanStyles from '../../../style/commanStyles'
import {
  BackButton,
  Button,
  Input,
  notificationHelper,
} from '../../../commonComponents'
import appColors from '../../../theme/appColors'
import { DriverProfile } from '../../../commonComponents'
import { Map } from '../../mapView'
import { useValues } from '../../../utils/context'
import Geolocation from 'react-native-geolocation-service'
import OTPTextView from 'react-native-otp-textinput'
import {
  fontSizes,
  windowHeight,
  windowWidth,
} from '../../../theme/appConstant'
import appFonts from '../../../theme/appFonts'
import {
  BottomSheetModal,
  BottomSheetView,
  BottomSheetModalProvider,
} from '@gorhom/bottom-sheet'
import { FAB } from 'react-native-paper'
import Icons from '../../../utils/icons/icons'
import { initializeApp } from 'firebase/app'
import { getFirestore, doc, getDoc } from 'firebase/firestore'
import { firebaseConfig } from '../../../../firebase'
import { useAppNavigation } from '../../../utils/navigation'
import { AppDispatch } from '../../../api/store'

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

export function RideComplete() {
  const { viewRtlStyle, textRtlStyle } = useValues()
  const navigation = useAppNavigation()
  const { colors } = useTheme()
  const route = useRoute<any>()
  const dispatch = useDispatch<AppDispatch>()
  const { rideData }: any = route.params
  const [elapsedTime, setElapsedTime] = useState<string>('00:00:00')
  const [totalDistance, setTotalDistance] = useState<number>(0)
  const [elapsedSeconds, setElapsedSeconds] = useState<number>(0)
  const [isRunning, setIsRunning] = useState<boolean>(true)
  const [endTime, setEndTime] = useState<string | null>(null)
  const [locations, setLocations] = useState<any>(null)
  const { translateData } = useSelector((state: any) => state.setting)
  const [completeLoading, setCompleteLoading] = useState<boolean>(false)
  const { isDark } = useValues()
  const [otp, setOtp] = useState<string>('')
  const [correctOtp, setCorrectOtp] = useState<string>('')
  const bottomSheetModalRef = useRef<BottomSheetModal>(null)
  const otpBottomSheetRef = useRef<BottomSheetModal>(null)
  const [isOtpSheetOpen, setIsOtpSheetOpen] = useState<boolean>(false)
  const isVerificationSuccess = useRef<boolean>(false)
  const [showActions, setShowActions] = useState<boolean>(false)
  const [visible, setVisible] = useState<boolean>(false)
  const [extraFareCharges, setExtraFareCharges] = useState<
    Array<{ id: string; title: string; amount: string }>
  >([])
  const extraFareSheetRef = useRef<BottomSheetModal>(null)
  const totalAmount = extraFareCharges?.reduce((sum, item) => {
    return sum + Number(item?.amount || 0)
  }, 0)
  const { zoneValue } = useSelector((state: any) => state.zoneUpdate)
  const [showExtraFareSheet, setShowExtraFareSheet] = useState<boolean>(false)

  useEffect(() => {
    bottomSheetModalRef.current?.present()
    isVerificationSuccess.current = false
  }, [])

  useFocusEffect(
    useCallback(() => {
      const onBackPress = () => {
        if (isOtpSheetOpen) {
          otpBottomSheetRef.current?.close()
          return true // handled -> don't exit
        } else {
          navigation.navigate('TabNav')
          return true // handled -> don't exit
        }
      }

      const subscription = BackHandler.addEventListener(
        'hardwareBackPress',
        onBackPress,
      )

      return () => subscription.remove()
    }, [isOtpSheetOpen, navigation]),
  )

  const requestLocationPermission = async () => {
    if (Platform.OS === 'android') {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      )
      return granted === PermissionsAndroid.RESULTS.GRANTED
    }
    return true
  }
  const handleAddCharge = useCallback((newCharge: any) => {
    setExtraFareCharges(prevCharges => [...prevCharges, newCharge])
  }, [])

  const handleRemoveExtraFare = (id: string) => {
    setExtraFareCharges(prev => prev.filter(charge => charge.id !== id))
  }

  useEffect(() => {
    const startLocationTracking = async () => {
      const hasPermission = await requestLocationPermission()
      if (!hasPermission) {
        return
      }
      const watchId = Geolocation.watchPosition(
        position => {
          const { latitude, longitude } = position.coords
          setLocations({ latitude, longitude })
        },
        error => { },
        { enableHighAccuracy: true, distanceFilter: 100, interval: 5000 },
      )
      return () => Geolocation.clearWatch(watchId)
    }
    startLocationTracking()
    return () => {
      Geolocation.stopObserving()
    }
  }, [])

  const getCurrentTime = () => new Date().toTimeString().slice(0, 8)

  useEffect(() => {
    if (isRunning && rideData?.start_time) {
      const timerInterval = setInterval(() => {
        const now = new Date()
        const [hours, minutes, seconds] = rideData?.start_time
          .split(':')
          .map(Number)
        const startTime = new Date(
          now.getFullYear(),
          now.getMonth(),
          now.getDate(),
          hours,
          minutes,
          seconds,
        )
        if (!isNaN(startTime.getTime())) {
          const secondsGap = Math.floor(
            (now.getTime() - startTime.getTime()) / 1000,
          )
          setElapsedSeconds(secondsGap)
          const hrs = Math.floor(secondsGap / 3600)
            .toString()
            .padStart(2, '0')
          const mins = Math.floor((secondsGap % 3600) / 60)
            .toString()
            .padStart(2, '0')
          const secs = (secondsGap % 60).toString().padStart(2, '0')
          setElapsedTime(`${hrs}:${mins}:${secs}`)
        }
      }, 1000)
      return () => clearInterval(timerInterval)
    }
  }, [isRunning, rideData?.start_time])

  const gotoComplete = async () => {
    if (rideData?.service?.service_type === 'parcel') {
      setCompleteLoading(true)
      try {
        const rideRef = doc(db, 'rides', rideData?.id.toString())
        const rideSnap = await getDoc(rideRef)

        if (rideSnap.exists()) {
          const fetchedOtp = rideSnap.data()?.parcel_delivered_otp

          if (fetchedOtp) {
            setCorrectOtp(fetchedOtp)
            bottomSheetModalRef.current?.close()
            otpBottomSheetRef.current?.present(1)
          } else {
            notificationHelper('', translateData.deliveryOtp, 'error')
          }
        } else {
          notificationHelper('', translateData.rideDetailsNotFound, 'error')
        }
      } catch (error) {
        notificationHelper('', translateData.fetchDetails, 'error')
      } finally {
        setCompleteLoading(false)
      }
    } else {
      handleConfirm()
    }
  }
  const handleConfirm = (verifiedOtp: string | null = null) => {
    setCompleteLoading(true)
    const end = getCurrentTime()
    setEndTime(end)

    // Create a copy of the location coordinates array
    let updatedLocationCoordinates = [...(rideData?.location_coordinates || [])]

    // If there are location coordinates, update the last one (destination) with current GPS location
    if (updatedLocationCoordinates?.length > 0 && locations) {
      updatedLocationCoordinates[updatedLocationCoordinates?.length - 1] = {
        lat: locations.latitude.toString(),
        lng: locations.longitude.toString(),
      }
    }
    // If no location coordinates exist, create a new array with current location
    else if (locations) {
      updatedLocationCoordinates = [
        {
          lat: locations.latitude.toString(),
          lng: locations.longitude.toString(),
        },
      ]
    }

    const payloadData: any = {
      status: 'completed',
      end_time: end,
      distance: totalDistance.toFixed(2),
      distance_unit: 'km',
      location_coordinates: updatedLocationCoordinates,
      extra_charges:
        extraFareCharges?.map((item: any) => ({
          title: item?.title,
          amount: Number(item?.amount),
        })) || [],
    }

    if (verifiedOtp) {
      payloadData.parcel_delivered_otp = verifiedOtp
    }

    // Add extra fare charges to payload if any exist
    if (extraFareCharges?.length > 0) {
      payloadData.extra_fare_charges = extraFareCharges.map(charge => ({
        title: charge.title,
        amount: parseFloat(charge.amount),
      }))
    }

    dispatch(rideDataPut({ data: payloadData, ride_id: rideData?.id }))
      .then(async (res: any) => {
        if (res?.payload?.id) {
          dispatch(selfDriverData())
          dispatch(rideDataGets())
          navigation.navigate('RideDetails', { ride_Id: rideData?.id })
        } else {
          notificationHelper('', translateData.failedComplet, 'error')
        }
      })
      .catch(error => { })
      .finally(() => {
        setCompleteLoading(false)
      })
  }
  const otpVerify = () => {
    if (otp == correctOtp) {
      isVerificationSuccess.current = true
      otpBottomSheetRef.current?.close()
      handleConfirm(otp)
    } else {
      setOtp('')
      notificationHelper('', translateData.otpWrong, 'error')
    }
  }

  const handleOtpSheetChange = useCallback((index: number) => {
    setIsOtpSheetOpen(index >= 0)
  }, [])

  const handleOtpDismiss = useCallback(() => {
    setOtp('')
    if (!isVerificationSuccess.current) {
      bottomSheetModalRef.current?.present()
    }
  }, [])

  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 handleSaveExtraFare = () => {
    extraFareSheetRef.current?.close()
    setShowExtraFareSheet(false)
    setShowActions(false)
  }

  const handleExtraFareSheetChange = useCallback((index: number) => {
    setShowExtraFareSheet(index >= 0)
    if (index >= 0) {
      setShowActions(false)
    }
  }, [])
  useEffect(() => {
    setVisible(true)
  }, [])

  return (
    <View style={commanStyles.main}>
      {rideData?.service_category?.service_category_type !== 'rental' ? (
        <View style={styles.mapSection}>
          <Map
            stoplocation={
              rideData?.location_coordinates &&
                rideData.location_coordinates?.length > 2
                ? rideData.location_coordinates
                  .slice(1, -1)
                  .map((item: any) => ({
                    latitude: parseFloat(item.lat),
                    longitude: parseFloat(item.lng),
                  }))
                : []
            }
            Destinationlocation={
              rideData?.location_coordinates?.[
              rideData.location_coordinates?.length - 1
              ]
            }
            driverId={rideData?.driver?.id}
            rideDetails={rideData}
          />
        </View>
      ) : (
        <View />
      )}
      <View style={styles.extraSection}></View>
      <View style={styles.backButton}>
        <BackButton />
      </View>

      <Modal
        visible={visible}
        animationType="slide"
        transparent={true}
        onRequestClose={() => setVisible(false)}
        onDismiss={() => setVisible(false)}
      >
        <TouchableOpacity
          style={localStyles.modalOverlay}
          onPress={() => setVisible(false)}
          activeOpacity={0.9}
        >
          <View
            style={[
              localStyles.modalBox,
              {
                backgroundColor: isDark
                  ? appColors.darkThemeSub
                  : appColors.white,
              },
            ]}
          >
            <Text
              style={[
                localStyles.modalTitle,
                { color: isDark ? appColors.white : appColors.black },
              ]}
            >
              {translateData?.gotomap}
            </Text>
            <Text
              style={[
                localStyles.modalText,
                { color: isDark ? appColors.darkText : appColors.primaryFont },
              ]}
            >
              {translateData?.warnmap}
            </Text>

            <TouchableOpacity
              activeOpacity={0.7}
              style={localStyles.closeIcon}
              onPress={() => setVisible(false)}
            >
              <Icons.CloseSimple color={appColors.black} />
            </TouchableOpacity>
            <View
              style={[
                {
                  flexDirection: viewRtlStyle,
                  justifyContent: 'space-between',
                  alignItems: 'center',
                },
              ]}
            >
              <TouchableOpacity
                activeOpacity={0.7}
                style={[
                  localStyles.closeButton,
                  {
                    backgroundColor: colors.text,
                    borderRadius: windowHeight(55),
                    height: windowHeight(5.5),
                  },
                ]}
                onPress={() => {
                  gotoOtherMap('google')
                  setVisible(false)
                }}
              >
                <Text
                  style={[
                    localStyles.closeText,
                    { color: isDark ? appColors.black : appColors.white },
                  ]}
                >
                  {translateData?.gomap}
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </TouchableOpacity>
      </Modal>

      <BottomSheetModalProvider>
        {showActions && (
          <>
            <FAB
              icon={Icons.GoogleMap}
              style={[
                styles.fabMini,
                {
                  backgroundColor: isDark
                    ? appColors.darkThemeSub
                    : appColors.white,
                },
                { bottom: '66.5%' },
              ]}
              onPress={() => gotoOtherMap('google')}
            />
            <FAB
              icon={Icons.Wazemap}
              style={[
                styles.fabMini,
                {
                  backgroundColor: isDark
                    ? appColors.darkThemeSub
                    : appColors.white,
                },
                { bottom: '58%' },
              ]}
              onPress={() => gotoOtherMap('waze')}
            />
            <FAB
              icon={Icons.BingMap}
              style={[
                styles.fabMini,
                {
                  backgroundColor: isDark
                    ? appColors.darkThemeSub
                    : appColors.white,
                },
                { bottom: '50%' },
              ]}
              onPress={() => gotoOtherMap('bing')}
            />
          </>
        )}
        <FAB
          icon={Icons.Map}
          style={[
            styles.fab,
            {
              backgroundColor: isDark
                ? appColors.darkThemeSub
                : appColors.white,
            },
          ]}
          onPress={() => setShowActions(!showActions)}
        />

        <BottomSheetModal
          ref={bottomSheetModalRef}
          index={0}
          snapPoints={['40%']}
          enablePanDownToClose={false}
          enableContentPanningGesture={false}
          enableHandlePanningGesture={false}
          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 style={styles.bottomSheetlayer}>
            {rideData?.service_category?.service_category_type === 'rental' ? (
              <View
                style={[
                  styles.rideDataMainView,
                  { flexDirection: viewRtlStyle },
                ]}
              ></View>
            ) : null}
            <View style={styles.greenSection}>
              <View
                style={[
                  styles.additionalSection,
                  {
                    backgroundColor: colors.card,
                    borderColor: colors.border,
                    height: windowHeight(21.5),
                    paddingTop: windowHeight(1),
                    paddingBottom: windowHeight(1),
                  },
                ]}
              >
                <DriverProfile
                  userDetails={rideData?.rider}
                  borderRadius={windowHeight(25)}
                  showInfoIcon={true}
                  iconColor={appColors.primary}
                  backgroundColor={appColors.white}
                  rideDetails={rideData}
                  width={'85%'}
                  otpsheet={true}
                />
              </View>

              <View
                style={{
                  flexDirection: viewRtlStyle,
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  marginTop: windowHeight(2),
                }}
              >
                <View style={{ width: '50%' }}>
                  <Button
                    onPress={() => {
                      extraFareSheetRef.current?.present()
                    }}
                    title={
                      totalAmount
                        ? `${translateData?.extra}${rideData?.currency_symbol}${totalAmount}`
                        : translateData.addextra || 'Add Extra Charges'
                    }
                    backgroundColor={colors.background}
                    color={isDark ? appColors.white : appColors.black}
                  />
                </View>
                <View style={{ width: '50%' }}>
                  <Button
                    onPress={gotoComplete}
                    title={translateData.completeRides}
                    backgroundColor={colors.text}
                    color={isDark ? appColors.black : appColors.white}
                    loading={completeLoading}
                  />
                </View>
              </View>
            </View>
          </BottomSheetView>
        </BottomSheetModal>

        <BottomSheetModal
          ref={otpBottomSheetRef}
          index={0}
          snapPoints={['34%']}
          onChange={handleOtpSheetChange}
          onDismiss={handleOtpDismiss}
          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 style={localStyles.otpSheetContainer}>
            <View
              style={{
                borderWidth: windowWidth(0.3),
                borderColor: colors.border,
                backgroundColor: colors.card,
                borderRadius: windowWidth(5),
                paddingVertical: windowHeight(2),
                paddingHorizontal: windowWidth(4),
                marginHorizontal: windowWidth(4),
              }}
            >
              <View>
                <Text
                  style={[
                    localStyles.otpTitle,
                    { color: colors.text, textAlign: textRtlStyle },
                  ]}
                >
                  {translateData.deliveryOtps}
                </Text>
                <Text
                  style={[
                    localStyles.otpSubtitle,
                    { color: appColors.iconColor, textAlign: textRtlStyle },
                  ]}
                >
                  {translateData.otpNotice}
                </Text>
              </View>
              <OTPTextView
                handleTextChange={text => {
                  setOtp(text)
                }}
                inputValue={otp}
                inputCount={4}
                keyboardType="numeric"
                tintColor={isDark ? appColors.white : appColors.black}
                offTintColor={colors.background}
                containerStyle={localStyles.otpContainer}
                textInputStyle={[
                  localStyles.otpInput,
                  { backgroundColor: colors.background, color: colors.text },
                ]}
              />
            </View>
            <View style={localStyles.otpButtonContainer}>
              <Button
                title={translateData.verifyDone}
                backgroundColor={colors.text}
                color={isDark ? appColors.black : appColors.white}
                onPress={otpVerify}
              />
            </View>
          </BottomSheetView>
        </BottomSheetModal>

        <BottomSheetModal
          ref={extraFareSheetRef}
          index={1}
          snapPoints={['42%']}
          onChange={handleExtraFareSheetChange}
          handleIndicatorStyle={{
            backgroundColor: appColors.primary,
            height: windowHeight(0.6),
            width: windowWidth(10),
            marginTop: windowHeight(0.2),
          }}
          containerStyle={{ borderRadius: windowWidth(5) }}
          backgroundStyle={{
            backgroundColor: isDark ? appColors.bgDark : appColors.white,
          }}
        >
          <ExtraFareSheetContent
            translateData={translateData}
            isDark={isDark}
            appColors={appColors}
            colors={colors}
            zoneValue={zoneValue}
            charges={extraFareCharges}
            onAdd={handleAddCharge}
            onRemove={handleRemoveExtraFare}
            onSave={handleSaveExtraFare}
          />
        </BottomSheetModal>
      </BottomSheetModalProvider>
    </View>
  )
}

const localStyles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalBox: {
    width: '80%',
    backgroundColor: appColors.white,
    borderRadius: 10,
    padding: 20,
    alignItems: 'center',
  },
  modalTitle: {
    fontFamily: appFonts.bold,
    fontSize: fontSizes.FONT4,
    marginBottom: 10,
    color: appColors.black,
  },
  modalText: {
    fontFamily: appFonts.regular,
    fontSize: fontSizes.FONT3HALF,
    color: appColors.primaryFont,
    textAlign: 'center',
    marginBottom: 20,
  },
  closeIcon: {
    position: 'absolute',
    zIndex: 2,
    right: windowHeight(1),
    backgroundColor: appColors.lightGray,
    borderRadius: windowHeight(2.5),
    marginTop: windowHeight(1),
    height: windowHeight(2.5),
    width: windowHeight(2.5),
    alignItems: 'center',
    justifyContent: 'center',
  },
  closeButton: {
    backgroundColor: appColors.primary,
    width: windowWidth(70),
    height: windowHeight(5),
    borderRadius: windowWidth(1.5),
    marginHorizontal: windowWidth(5),
    alignItems: 'center',
    justifyContent: 'center',
  },
  closeText: {
    color: appColors.white,
    fontFamily: appFonts.medium,
    fontSize: fontSizes.FONT3HALF,
  },
  otpSheetContainer: {
    flex: 1,
    justifyContent: 'space-around',
    paddingHorizontal: windowWidth(1.5),
    paddingBottom: windowHeight(2),
  },
  otpTitle: {
    fontFamily: appFonts.semiBold,
    fontSize: fontSizes.FONT4HALF,
    textAlign: 'center',
    marginBottom: windowHeight(1),
  },
  otpSubtitle: {
    fontFamily: appFonts.regular,
    fontSize: fontSizes.FONT3,
    textAlign: 'center',
    marginBottom: windowHeight(1),
  },
  otpContainer: {},
  otpInput: {
    width: windowHeight(6),
    height: windowHeight(6),
    borderWidth: windowWidth(0.45),
    borderRadius: windowHeight(6),
    textAlign: 'center',
    fontSize: fontSizes.FONT5,
    fontFamily: appFonts.medium,
    borderBottomWidth: windowWidth(0.45),
  },
  otpButtonContainer: {
    width: '100%',
    marginTop: windowHeight(2),
  },
})

const ExtraFareSheetContent = React.memo(
  ({
    translateData,
    isDark,
    appColors,
    colors,
    zoneValue,
    charges,
    onAdd,
    onRemove,
    onSave,
  }: any) => {
    const [title, setTitle] = useState('')
    const [amount, setAmount] = useState('')

    const { viewRtlStyle } = useValues()
    const handleAdd = () => {
      if (!title.trim() || !amount.trim()) {
        notificationHelper('', translateData.enterBoth, 'error')
        return
      }

      const amountValue = parseFloat(amount.trim())
      if (isNaN(amountValue) || amountValue <= 0) {
        notificationHelper('', translateData.enterValidAmount, 'error')
        return
      }

      onAdd({
        id: Date.now().toString(),
        title: title.trim(),
        amount: amountValue.toString(),
      })

      setTitle('')
      setAmount('')
    }

    return (
      <BottomSheetView>
        <View
          style={[
            styles.extraFareSheetContainer,
            { borderColor: colors.border },
            { backgroundColor: colors.card },
          ]}
        >
          <Text
            style={[
              styles.extraFareTitle,
              { color: isDark ? appColors.white : appColors.black },
            ]}
          >
            {translateData?.addCharge || 'Add Extra Charges'}
          </Text>

          <View style={styles.inputContainer}>
            <Text
              style={[
                styles.inputLabel,
                { color: isDark ? appColors.white : appColors.black },
              ]}
            >
              {translateData?.selectTitle || 'Select Charge'}
            </Text>
            <Input
              placeholder={translateData?.entertitle}
              value={title}
              onChangeText={setTitle}
              backgroundColor={isDark ? appColors.primaryFont : appColors.white}
            />
          </View>

          <View style={styles.inputContainer}>
            <Text
              style={[
                styles.inputLabel,
                { color: isDark ? appColors.white : appColors.black },
              ]}
            >
              {translateData?.enterAmount}
            </Text>
            <Input
              placeholder={translateData?.enterAmount}
              keyboardType="numeric"
              value={amount}
              onChangeText={setAmount}
              backgroundColor={isDark ? appColors.primaryFont : appColors.white}
            />
          </View>
          {charges?.length > 0 && (
            <View
              style={[
                styles.chargesList,
                { backgroundColor: colors.background },
              ]}
            />
          )}
          {charges?.length > 0 && (
            <View>
              {charges.map((charge: any, index: number) => (
                <View key={charge?.id}>
                  <View
                    style={{
                      flexDirection: viewRtlStyle,
                      alignItems: 'center',
                      justifyContent: 'space-between',
                    }}
                  >
                    <View
                      style={[
                        styles.chargeItem,
                        { flexDirection: viewRtlStyle },
                      ]}
                    >
                      <Text
                        style={[
                          { color: isDark ? appColors.white : appColors.black },
                        ]}
                      >
                        {charge?.title}
                      </Text>

                      <View>
                        <Text
                          style={[
                            styles.chargeAmount,
                            { color: appColors.iconColor },
                          ]}
                        >
                          {`(${zoneValue?.currency_symbol}${charge?.amount})`}
                        </Text>
                      </View>
                    </View>

                    <TouchableOpacity onPress={() => onRemove(charge?.id)}>
                      <Icons.CloseSimple
                        color={appColors.iconColor}
                        size={16}
                      />
                    </TouchableOpacity>
                  </View>

                  {index !== charges.length - 1 && (
                    <View
                      style={[
                        styles.chargesList1,
                        { backgroundColor: colors.background },
                      ]}
                    />
                  )}
                </View>
              ))}
            </View>
          )}
        </View>
        <View style={[styles.actionButtons, { flexDirection: viewRtlStyle }]}>
          <TouchableOpacity style={{ width: '51%' }}>
            <Button
              onPress={handleAdd}
              title={translateData.addMore}
              backgroundColor={colors.card}
              color={colors.text}
            />
          </TouchableOpacity>

          <TouchableOpacity style={{ width: '51%' }}>
            <Button
              onPress={onSave}
              title={translateData.save}
              backgroundColor={colors.text}
              color={isDark ? appColors.black : appColors.white}
            />
          </TouchableOpacity>
        </View>
      </BottomSheetView>
    )
  },
)
