import {
  View,
  Text,
  Image,
  TouchableOpacity,
  ScrollView,
  Modal,
  Linking,
} from 'react-native'
import React, { useState } from 'react'
import { Button, Header, notificationHelper } from '../../../commonComponents'
import appColors from '../../../theme/appColors'
import {
  fontSizes,
  windowHeight,
  windowWidth,
} from '../../../theme/appConstant'
import { styles } from './styles'
import Images from '../../../utils/images/images'
import Icons from '../../../utils/icons/icons'
import { acceptRequestValue } from '../../../api/store/action'
import { useDispatch, useSelector } from 'react-redux'
import { useNavigation, useTheme } from '@react-navigation/native'
import OTPTextView from 'react-native-otp-textinput'
import { rideStartData } from '../../../api/store/action'
import { useValues } from '../../../utils/context'
import { AppDispatch } from '../../../api/store'
import appFonts from '../../../theme/appFonts'
import { useAppNavigation } from '../../../utils/navigation'

export function RentalDetails({ route }: any) {
  const { ride, status } = route.params || {}
  const [otpModalVisible, setOtpModalVisible] = useState<boolean>(false)
  const [warning, setWarning] = useState<string>('')
  const [enteredOtp, setEnteredOtp] = useState<string>('')
  const { goBack } = useNavigation()
  const dispatch = useDispatch<AppDispatch>()
  const { viewRtlStyle, isDark, textRtlStyle } = useValues()
  const { colors } = useTheme()
  const { translateData } = useSelector((state: any) => state.setting)


  const statusMapping: any = {
    accepted: {
      text: `${translateData.pendingRide}`,
      color: appColors.completeColor,
      backgroundColor: appColors.lightYellow,
    },
    started: {
      text: `${translateData.active}`,
      color: appColors.activeColor,
      backgroundColor: appColors.lightGreen,
    },
    schedule: {
      text: `${translateData.scheduled}`,
      color: appColors.scheduleColor,
      backgroundColor: appColors.lightPink,
    },
    cancelled: {
      text: `${translateData.cancel}`,
      color: appColors.alertRed,
      backgroundColor: appColors.lightOrange,
    },
    completed: {
      text: `${translateData.completed}`,
      color: appColors.primary,
      backgroundColor: appColors.cardicon,
    },
  }

  const currentStatus = statusMapping[status] || {
    text: 'Requested',
    color: appColors.primaryFont,
    backgroundColor: '',
  }

  const closeModal = () => {
    setOtpModalVisible(false)
    let payload: any = {
      ride_id: ride?.id,
      otp: enteredOtp,
    }
    dispatch(rideStartData(payload))
      .unwrap()
      .then((res: any) => {
        if (res.state !== false) {
          notificationHelper('', translateData.rideStarted, 'info')
          goBack()
        }
      })
  }

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

  const dateObj = new Date(endTime.replace(' ', 'T'))
  const options = { day: 'numeric', month: 'long' }
  const day = dateObj.getDate()
  const month = dateObj.toLocaleString('en-GB', { month: 'short' }) // Dec
  const year = dateObj.getFullYear() // 2024

  const formattedDate = `${day} ${month}’${year}`
  let hours = dateObj.getHours()
  const ampm = hours >= 12 ? 'PM' : 'AM'
  hours = hours % 12 || 12 // Convert 0 to 12
  const formattedTime = `${hours} ${ampm}`

  const dateObj1 = new Date(startTIme.replace(' ', 'T'))
  const optionsdate = { day: 'numeric', month: 'long' }
  const formattedDate1 = `${day} ${month}’${year}` // "23 July"
  let hours1 = dateObj1.getHours()
  const ampm1 = hours >= 12 ? 'PM' : 'AM'
  hours = hours % 12 || 12 // Convert 0 to 12
  const formattedTime1 = `${hours} ${ampm}`

  const acceptRequest = () => {
    let payload: any = {
      ride_request_id: ride?.id,
    }
    dispatch(acceptRequestValue(payload))
      .unwrap()
      .then((res: any) => {
        notificationHelper('', translateData.rideAccepted, 'success')
        goBack()
      })
  }

  const gotoPickup = () => {
    setOtpModalVisible(true)
  }

  const handleChange = (otp: string) => {
    setEnteredOtp(otp)
    if (otp.length == 5) {
      setWarning('')
    }
  }
  const getStarIcons = rating => {
    const stars = []
    const fullStars = Math.floor(rating)
    const halfStar = rating - fullStars >= 0.5
    const emptyStars = 5 - fullStars - (halfStar ? 1 : 0)
    for (let i = 0; i < fullStars; i++) {
      stars.push('full')
    }
    if (halfStar) {
      stars.push('half')
    }
    for (let i = 0; i < emptyStars; i++) {
      stars.push('empty')
    }

    return stars
  }
  const { navigate } = useAppNavigation()
  const rating = ride?.rider?.rating_count || 0
  const reviewCount = ride?.rider?.reviews_count || 0

  const stars = getStarIcons(Number(rating))
  const gotoMessage = item => {
    navigate('Chat', {
      driverId: item?.driver?.id,
      riderId: item?.rider?.id,
      rideId: item?.id,
      riderName: item?.rider?.name,
      riderImage: item?.rider?.profile_image?.original_url,
    })
  }

  const gotoCall = item => {
    const phoneNumber = item?.driver?.phone
    Linking.openURL(`tel:${phoneNumber}`)
  }

  return (
    <View style={styles.container}>
      <Header title={translateData.rentalDetails} style={styles.gap} />
      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={styles.detailContainer}>
          <View
            style={[
              styles.profileContainer,
              { backgroundColor: colors.card, borderColor: colors.border },
            ]}
          >
            <View style={[styles.profileView, { flexDirection: viewRtlStyle }]}>
              <View style={[styles.starView, { flexDirection: viewRtlStyle }]}>
                <View
                  style={[
                    styles.profileImg,
                    {
                      backgroundColor: isDark
                        ? appColors.white
                        : appColors.black,
                    },
                  ]}
                >
                  <Text
                    style={[
                      styles.name,
                      {
                        color: isDark ? appColors.black : appColors.white,
                        fontFamily: appFonts.semiBold,
                        fontSize: fontSizes.FONT4HALF,
                      },
                    ]}
                  >
                    {ride?.rider?.name.charAt(0).toUpperCase()}
                  </Text>
                </View>
                <View style={styles.riderContainer}>
                  <Text
                    style={[
                      styles.name,
                      {
                        color: isDark ? appColors.white : appColors.primaryFont,
                      },
                    ]}
                  >
                    {ride?.rider?.name}
                  </Text>

                  <View
                    style={[styles.starView, { flexDirection: viewRtlStyle }]}
                  >
                    {stars.map((type, index) => (
                      <View key={index}>
                        {type === 'full' && <Icons.StarFill />}
                        {type === 'half' && <Icons.StarHalf />}
                        {type === 'empty' && <Icons.UnfillStar />}
                      </View>
                    ))}

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

                    <Text
                      style={[
                        styles.name,
                        {
                          color: appColors.iconColor,
                          fontFamily: appFonts.regular,
                          fontSize: fontSizes.FONT3HALF,
                        },
                      ]}
                    >
                      ({reviewCount})
                    </Text>
                  </View>
                </View>
              </View>
              <View
                style={[styles.tag, { backgroundColor: colors.background }]}
              >
                <Text style={[styles.tagTitle, { color: colors.text }]}>
                  #{ride?.ride_number}
                </Text>
              </View>
            </View>

            <View
              style={[
                styles.acceptedContainer,
                {
                  flexDirection: viewRtlStyle,
                  width: '97%',
                  marginHorizontal: windowWidth(1),
                  marginBottom: windowHeight(1.5),
                },
              ]}
            >
              <TouchableOpacity
                activeOpacity={0.7}
                style={[
                  styles.callContainer,
                  {
                    width: windowWidth(65),
                    alignItems: 'flex-start',
                  },
                ]}
                onPress={() => gotoMessage(ride)}
              >
                <Text
                  style={{
                    fontFamily: appFonts.regular,
                    marginHorizontal: windowWidth(3),
                    color: appColors.iconColor,
                  }}
                >
                  {translateData?.sendmsg}
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                activeOpacity={0.7}
                style={[
                  styles.callContainer,
                  {
                    borderColor: colors.border,
                    backgroundColor: appColors.online,
                  },
                ]}
                onPress={() => gotoCall(ride)}
              >
                <Icons.Call color={appColors.white} />
              </TouchableOpacity>
            </View>

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

            <View style={{ flexDirection: viewRtlStyle, alignItems: 'center' }}>
              <View
                style={[styles.round, { backgroundColor: colors.background }]}
              >
                <Icons.location />
              </View>
              <View>
                <Text style={styles.locationName}>
                  {ride?.locations?.[0]?.length > 33
                    ? ride.locations[0].substring(0, 33) + '...'
                    : ride?.locations?.[0]}
                </Text>

                <View
                  style={{
                    flexDirection: viewRtlStyle,
                    alignItems: 'center',
                    marginHorizontal: windowWidth(2),
                  }}
                >
                  <View
                    style={[
                      styles.containerClock,
                      { flexDirection: viewRtlStyle },
                    ]}
                  >
                    <View style={styles.calanderBig1}>
                      <Icons.CalanderSmall />
                    </View>
                    <Text style={[styles.textNormal]}>{formattedDate1}</Text>
                  </View>

                  <View
                    style={{
                      height: windowHeight(2),
                      width: windowWidth(0.45),
                      backgroundColor: colors.border,
                      marginHorizontal: windowWidth(2),
                    }}
                  />

                  <View
                    style={[
                      styles.containerClock,
                      { flexDirection: viewRtlStyle },
                    ]}
                  >
                    <View style={styles.calanderBig}>
                      <Icons.Clock />
                    </View>
                    <Text
                      style={[
                        styles.textNormal,
                        { marginHorizontal: windowWidth(2) },
                      ]}
                    >
                      {formattedTime1}
                    </Text>
                  </View>
                </View>
              </View>
            </View>

            <View style={{ marginBottom: windowHeight(1) }}>
              <View
                style={[
                  styles.dropOffBorder,
                  {
                    backgroundColor: appColors.border,
                  },
                ]}
              />
              <View
                style={{
                  height: windowHeight(8),
                  borderRightWidth: windowWidth(0.45),
                  borderColor: appColors.iconColor,
                  position: 'absolute',
                  marginHorizontal: windowWidth(5.2),
                  borderStyle: 'dotted',
                  marginTop: -4,
                }}
              />

              <View
                style={[
                  styles.timeround,
                  { borderColor: colors.border, backgroundColor: colors.card },
                ]}
              >
                <Text
                  style={[
                    styles.textNormal,
                    { color: appColors.iconColor, fontFamily: appFonts.medium },
                  ]}
                >
                  {ride?.no_of_days}
                  {'D'}
                </Text>
              </View>
            </View>

            <View style={{ flexDirection: viewRtlStyle, alignItems: 'center' }}>
              <View
                style={[styles.round, { backgroundColor: colors.background }]}
              >
                <Icons.gps />
              </View>
              <View>
                <Text style={styles.locationName}>
                  {ride?.locations[1]?.length > 30
                    ? ride.locations[1].substring(0, 30) + '...'
                    : ride?.locations?.[1]}
                </Text>

                <View
                  style={{
                    flexDirection: viewRtlStyle,
                    alignItems: 'center',
                    marginHorizontal: windowWidth(2),
                  }}
                >
                  <View
                    style={[
                      styles.containerClock,
                      { flexDirection: viewRtlStyle },
                    ]}
                  >
                    <View style={styles.calanderBig1}>
                      <Icons.CalanderSmall />
                    </View>
                    <Text style={[styles.textNormal]}>{formattedDate}</Text>
                  </View>

                  <View
                    style={{
                      height: windowHeight(2),
                      width: windowWidth(0.45),
                      backgroundColor: colors.border,
                      marginHorizontal: windowWidth(2),
                    }}
                  />

                  <View
                    style={[
                      styles.containerClock,
                      { flexDirection: viewRtlStyle },
                    ]}
                  >
                    <View style={styles.calanderBig}>
                      <Icons.Clock />
                    </View>
                    <Text
                      style={[
                        styles.textNormal,
                        { marginHorizontal: windowWidth(2) },
                      ]}
                    >
                      {formattedTime}
                    </Text>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>

        <TouchableOpacity
          activeOpacity={0.7}
          style={[
            styles.listContainer,
            { borderColor: colors.border, backgroundColor: colors.card },
          ]}
        >
          <View
            style={[
              styles.starMainView,
              {
                flexDirection: viewRtlStyle,
              },
            ]}
          >
            <View style={{ flexDirection: viewRtlStyle, alignItems: 'center' }}>
              {' '}
              <Image
                source={{ uri: ride?.rental_vehicle?.normal_image_url }}
                style={styles.carImg}
              />
              <View style={{ marginHorizontal: windowWidth(3) }}>
                <Text
                  style={[
                    styles.carBrand,
                    { color: isDark ? appColors.white : appColors.primaryFont },
                  ]}
                >
                  {ride?.rental_vehicle?.name}
                </Text>
                <Text style={styles.CLMV069}>
                  {ride?.vehicle_type?.plate_number}
                </Text>
              </View>
            </View>

            <View
              style={[
                styles.starView,
                {
                  flexDirection: viewRtlStyle,
                  backgroundColor: colors.background,
                },
              ]}
            >
              <View
                style={{
                  marginHorizontal: windowWidth(2),
                  flexDirection: viewRtlStyle,
                  alignItems: 'center',
                }}
              >
                <Icons.Star />
              </View>
              <Text
                style={[
                  styles.numberText,
                  {
                    color: isDark ? appColors.white : appColors.black,
                    fontFamily: appFonts.semiBold,
                  },
                ]}
              >
                4.0
              </Text>
              <Text
                style={[
                  styles.numberText,
                  {
                    color: isDark ? appColors.white : appColors.black,
                    fontFamily: appFonts.regular,
                    fontSize: fontSizes.FONT3HALF,
                    marginRight: windowWidth(2),
                  },
                ]}
              >
                (120)
              </Text>
            </View>
          </View>
          <View
            style={[
              styles.descContainer,
              {
                flexDirection: viewRtlStyle,
                backgroundColor: colors.background,
                paddingHorizontal: windowWidth(4),
                height: windowHeight(5),
                alignItems: 'center',
                borderRadius: windowWidth(55),
                marginTop: windowHeight(2),
              },
            ]}
          >
            <Text
              style={[
                styles.driverTitle,
                { color: isDark ? appColors.white : appColors.primaryFont },
              ]}
            >
              {translateData.driverPrice}
            </Text>
            <Text style={styles.rentPrice}>
              {ride?.currency_symbol}
              {ride?.rental_vehicle?.driver_per_day_charge}
              <Text style={styles.perDay}>/{translateData.day}</Text>
            </Text>
          </View>
          <View
            style={[styles.dashLine, { borderBottomColor: colors.border }]}
          />
          <Text
            style={[
              styles.carBrand,
              {
                color: isDark ? appColors.white : appColors.primaryFont,
                marginHorizontal: windowWidth(3),
              },
            ]}
          >
            {ride?.rental_vehicle?.name}
          </Text>
          <View style={[styles.descContainer, { flexDirection: viewRtlStyle }]}>
            <Text style={styles.engineInfo}>
              {ride?.rental_vehicle?.description}
            </Text>
            <Text style={[styles.rentPrice, { color: colors.text }]}>
              {ride?.currency_symbol}
              {ride?.rental_vehicle?.vehicle_per_day_price}
              <Text style={styles.perDay}>/{translateData.day}</Text>
            </Text>
          </View>
          <View
            style={[styles.dashLine, { borderBottomColor: colors.border }]}
          />

          <View style={[styles.tagContainer, { flexDirection: viewRtlStyle }]}>
            <View style={[styles.iconBox, { flexDirection: viewRtlStyle }]}>
              <Icons.CarType />
              <Text style={styles.iconTitle}>
                {ride?.rental_vehicle?.vehicle_subtype}
              </Text>
            </View>
            <View style={[styles.iconBox, { flexDirection: viewRtlStyle }]}>
              <Icons.FuelType />
              <Text style={styles.iconTitle}>
                {ride?.rental_vehicle?.fuel_type}
              </Text>
            </View>
            <View style={[styles.iconBox, { flexDirection: viewRtlStyle }]}>
              <Icons.Milage />
              <Text style={styles.iconTitle}>
                {ride?.rental_vehicle?.mileage}
              </Text>
            </View>
            <View style={[styles.iconBox, { flexDirection: viewRtlStyle }]}>
              <Icons.GearType />
              <Text style={styles.iconTitle}>
                {ride?.rental_vehicle?.gear_type}
              </Text>
            </View>
            <View style={[styles.iconBox, { flexDirection: viewRtlStyle }]}>
              <Icons.CarSeat />
              <Text style={styles.iconTitle}>5 {translateData.seat}</Text>
            </View>
            <View style={[styles.iconBox, { flexDirection: viewRtlStyle }]}>
              <Icons.Speed />
              <Text style={styles.iconTitle}>
                {ride?.rental_vehicle?.vehicle_speed}
              </Text>
            </View>
          </View>
          <View style={styles.interiorMainView}>
            <Text
              style={[
                styles.driverTitle,
                {
                  color: isDark ? appColors.white : appColors.black,
                  fontFamily: appFonts.medium,
                },
              ]}
            >
              {translateData.interior}
            </Text>
            <View style={styles.interiorView}>
              {ride?.rental_vehicle?.interior.map((detail, index) => (
                <Text key={index} style={styles.interiorData}>
                  {`• ${detail}`}
                </Text>
              ))}
            </View>
          </View>
        </TouchableOpacity>

        <View style={styles.billSummaryView}>
          <Text
            style={[
              styles.driverTitle,
              {
                color: isDark ? appColors.white : appColors.black,
                fontFamily: appFonts.semiBold,
                marginTop: windowHeight(3),
                marginHorizontal: windowWidth(2),
              },
            ]}
          >
            {translateData.billSummary}
          </Text>

          <View
            style={{
              backgroundColor: colors.card,
              marginHorizontal: windowWidth(1),
              paddingHorizontal: windowWidth(4),
              paddingVertical: windowHeight(1),
              borderRadius: windowWidth(5),
              marginTop: windowHeight(2),
            }}
          >
            {ride?.vehicle_rent > 0 && (
              <View
                style={[
                  styles.rideFareContainer,
                  {
                    flexDirection: viewRtlStyle,
                  },
                ]}
              >
                <Text
                  style={[styles.paymentTitle, { color: appColors.iconColor }]}
                >
                  {translateData.vehicleFare}
                </Text>
                <Text
                  style={[
                    styles.paymentTitle,
                    { color: isDark ? appColors.white : appColors.primaryFont },
                  ]}
                >
                  {ride?.currency_symbol}
                  {ride?.vehicle_rent}
                </Text>
              </View>
            )}
            <View
              style={[
                styles.rideFareContainer,
                {
                  flexDirection: viewRtlStyle,
                },
              ]}
            >
              <Text
                style={[styles.paymentTitle, { color: appColors.iconColor }]}
              >
                {translateData.driverFare}
              </Text>
              <Text
                style={[
                  styles.paymentTitle,
                  { color: isDark ? appColors.white : appColors.primaryFont },
                ]}
              >
                {ride?.currency_symbol}
                {ride?.rental_vehicle?.vehicle_per_day_price}
              </Text>
            </View>
            {ride?.driver_rent > 0 && (
              <View
                style={[
                  styles.rideFareContainer,
                  {
                    flexDirection: viewRtlStyle,
                  },
                ]}
              >
                <Text
                  style={[styles.paymentTitle, { color: appColors.iconColor }]}
                >
                  {translateData.driverFare}
                </Text>
                <Text
                  style={[
                    styles.paymentTitle,
                    { color: isDark ? appColors.white : appColors.primaryFont },
                  ]}
                >
                  {ride?.currency_symbol}
                  {ride?.driver_rent}
                </Text>
              </View>
            )}
            {ride?.platform_fee > 0 && (
              <View
                style={[
                  styles.rideFareContainer,
                  {
                    flexDirection: viewRtlStyle,
                  },
                ]}
              >
                <Text
                  style={[styles.paymentTitle, { color: appColors.iconColor }]}
                >
                  {translateData.platformFees}
                </Text>
                <Text
                  style={[
                    styles.paymentTitle,
                    { color: isDark ? appColors.white : appColors.primaryFont },
                  ]}
                >
                  {ride?.currency_symbol}
                  {ride?.platform_fee}
                </Text>
              </View>
            )}
            {ride?.tax > 0 && (
              <View
                style={[
                  styles.rideFareContainer,
                  {
                    flexDirection: viewRtlStyle,
                  },
                ]}
              >
                <Text
                  style={[styles.paymentTitle, { color: appColors.iconColor }]}
                >
                  {translateData.tax}
                </Text>
                <Text
                  style={[
                    styles.paymentTitle,
                    { color: isDark ? appColors.white : appColors.primaryFont },
                  ]}
                >
                  {ride?.currency_symbol}
                  {ride?.tax}
                </Text>
              </View>
            )}
            {ride?.commission > 0 && (
              <View
                style={[
                  styles.rideFareContainer,
                  {
                    flexDirection: viewRtlStyle,
                  },
                ]}
              >
                <Text
                  style={[styles.paymentTitle, { color: appColors.iconColor }]}
                >
                  {translateData.commission}
                </Text>
                <Text
                  style={[
                    styles.paymentTitle,
                    { color: isDark ? appColors.white : appColors.primaryFont },
                  ]}
                >
                  {ride?.currency_symbol}
                  {ride?.commission}
                </Text>
              </View>
            )}
            <View
              style={{
                borderTopWidth: 1,
                borderColor: appColors.border,
                borderStyle: 'solid',
                marginTop: windowHeight(1),
              }}
            />
            <View
              style={[
                styles.rideFareContainer,
                {
                  flexDirection: viewRtlStyle,
                  marginBottom: windowHeight(0.5),
                },
              ]}
            >
              <Text
                style={[
                  styles.paymentTitle,
                  {
                    color: isDark ? appColors.white : appColors.black,
                    fontFamily: appFonts.medium,
                    fontSize: windowWidth(3.8),
                  },
                ]}
              >
                {translateData.total}
              </Text>
              <Text
                style={[
                  styles.paymentTitle,
                  {
                    color: appColors.online,
                    fontFamily: appFonts.medium,
                    fontSize: fontSizes.FONT4,
                  },
                ]}
              >
                {ride?.currency_symbol}
                {ride?.total}
              </Text>
            </View>
          </View>
        </View>

        {currentStatus.text == 'Pending' && (
          <View style={styles.pickupCustomerBtn}>
            <Button
              title={translateData.pickupCustomer}
              backgroundColor={colors.text}
              color={isDark ? appColors.black : appColors.white}
              margin={windowWidth(2.5)}
              onPress={gotoPickup}
            />
          </View>
        )}
        {currentStatus.text == 'Requested' && (
          <View
            style={[
              styles.requestedContainer,
              {
                flexDirection: viewRtlStyle,
              },
            ]}
          >
            <TouchableOpacity
              style={[
                styles.declineContainer,
                {
                  backgroundColor: colors.card,
                },
              ]}
            >
              <Text style={[styles.declineText, { color: colors.text }]}>
                {translateData.decline}
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={acceptRequest}
              style={[styles.acceptContainer, { backgroundColor: colors.text }]}
              activeOpacity={0.7}
            >
              <Text
                style={[
                  styles.acceptText,
                  {
                    color: isDark ? appColors.black : appColors.white,
                  },
                ]}
              >
                {translateData.accept || 'Accept'}
              </Text>
            </TouchableOpacity>
          </View>
        )}

        <Modal
          visible={otpModalVisible}
          animationType="none"
          transparent={true}
          onRequestClose={closeModal}
        >
          <View style={styles.modalContainer}>
            <View
              style={[
                styles.modalContent,
                { backgroundColor: isDark ? colors.card : appColors.white },
              ]}
            >
              <TouchableOpacity
                style={[styles.closeBtn, { flexDirection: viewRtlStyle }]}
                onPress={closeModal}
                activeOpacity={0.7}
              >
                <Icons.Close />
              </TouchableOpacity>
              <Text
                style={[
                  styles.modalText,
                  { color: isDark ? colors.text : appColors.primaryFont },
                ]}
              >
                {translateData.otpConfirm}
              </Text>
              <Text
                style={[
                  styles.otpTitle,
                  { textAlign: textRtlStyle },
                  { color: isDark ? colors.text : appColors.primaryFont },
                ]}
              >
                {translateData.enterOTP}
              </Text>
              <OTPTextView
                containerStyle={[
                  styles.otpContainer,
                  { flexDirection: viewRtlStyle },
                ]}
                textInputStyle={[
                  styles.otpInput,
                  {
                    backgroundColor: isDark
                      ? appColors.darkThemeSub
                      : appColors.graybackground,
                  },
                  { color: colors.text },
                ]}
                handleTextChange={handleChange}
                inputCount={4}
                keyboardType="numeric"
                tintColor="transparent"
                offTintColor="transparent"
              />
              <TouchableOpacity
                onPress={closeModal}
                style={styles.closeButton}
                activeOpacity={0.7}
              >
                <Button
                  title={translateData.verify}
                  color={appColors.white}
                  onPress={closeModal}
                  backgroundColor={appColors.primary}
                />
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
      </ScrollView>
    </View>
  )
}
