import { View, Text, TouchableOpacity } from 'react-native'
import React from 'react'
import styles from './styles'
import { useTheme } from '@react-navigation/native'
import appColors from '../../../../../theme/appColors'
import appFonts from '../../../../../theme/appFonts'
import { useDispatch, useSelector } from 'react-redux'
import { PaymentRideInterface } from '../../../../../api/interface/walletInterface'
import { allpayment } from '../../../../../api/store/action'
import { useAppNavigation } from '../../../../../utils/navigation'
import { AppDispatch } from '../../../../../api/store'
import { useValues } from '../../../../../utils/context'

export function Bill({ pressRefresh, rideData }: any) {
  const { colors } = useTheme()
  const { translateData } = useSelector((state: any) => state.setting)
  const navigation = useAppNavigation()
  const { isDark } = useValues()

  return (
    <View
      style={[
        styles.billbox,
        { backgroundColor: colors.card, borderColor: colors.border },
      ]}
    >
      <View style={styles.completedPaymentView}>
        <Text style={styles.completedPayment}>
          {translateData.paymentPending}
        </Text>
        <View style={{ flexDirection: 'row', gap: 10 }}>
          <TouchableOpacity
            onPress={pressRefresh}
            style={[
              styles.refreshView,
              { backgroundColor: isDark ? appColors.white : appColors.black },
            ]}
            activeOpacity={0.7}
          >
            <Text
              style={{
                color: isDark ? appColors.black : appColors.white,
                fontFamily: appFonts.regular,
              }}
            >
              {translateData.refresh}
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  )
}
