import { View, Text } from 'react-native'
import React from 'react'
import styles from './styles'
import { useTheme } from '@react-navigation/native'
import { useValues } from '../../../../../utils/context'
import appColors from '../../../../../theme/appColors'
import { useSelector } from 'react-redux'

export function Payment({ rideDetails }: any) {
  const { colors } = useTheme()
  const { viewRtlStyle, textRtlStyle, isDark } = useValues()
  const { translateData } = useSelector((state: any) => state.setting)

  return (
    <View>
      <Text
        style={[
          styles.title,
          {
            color: isDark ? appColors.white : appColors.primaryFont,
            textAlign: textRtlStyle,
          },
        ]}
      >
        {translateData.paymentMethod}
      </Text>

      <View
        style={[
          styles.main,
          { borderColor: colors.border, backgroundColor: colors.card },
        ]}
      >
        <View>
          <View
            style={[
              styles.contain,
              {
                flexDirection: viewRtlStyle,
                borderColor: colors.border,
                backgroundColor: colors.card,
              },
            ]}
          >
            <Text style={[styles.type, { color: appColors.iconColor }]}>
              {translateData.paymentMode}
            </Text>
            <Text
              style={[
                styles.type,
                { color: isDark ? appColors.white : appColors.primaryFont },
              ]}
            >
              {rideDetails?.invoice_id}
            </Text>
          </View>
          <View style={[styles.contain, { flexDirection: viewRtlStyle }]}>
            <Text style={[styles.type, { color: appColors.iconColor }]}>
              {translateData.methodType}
            </Text>
            <Text
              style={[
                styles.type,
                { color: isDark ? appColors.white : appColors.primaryFont },
              ]}
            >
              {rideDetails?.payment_method}
            </Text>
          </View>
          <View style={[styles.contain, { flexDirection: viewRtlStyle }]}>
            <Text style={[styles.type, { color: appColors.iconColor }]}>
              {translateData.status}
            </Text>
            <Text
              style={[
                styles.type,
                {
                  color:
                    rideDetails?.payment_status === 'COMPLETED'
                      ? appColors.approv
                      : rideDetails?.payment_status === 'PENDING'
                      ? appColors.pending
                      : appColors.reject,
                },
              ]}
            >
              {rideDetails?.payment_status}
            </Text>
          </View>
        </View>
      </View>
    </View>
  )
}
