import { View, Text, Image, TouchableOpacity } from 'react-native'
import React from 'react'
import { DriverProfile, Address } from '../../../../commonComponents'
import appColors from '../../../../theme/appColors'
import images from '../../../../utils/images/images'
import styles from './styles'
import { useValues } from '../../../../utils/context'
import { useTheme } from '@react-navigation/native'
import { useNavigation } from '@react-navigation/native'
import Clock from '../../../../assets/icons/clock'
import Calander from '../../../../assets/icons/caladerSmall'
import { useSelector } from 'react-redux'
import { apiformatDates } from '../../../../utils/functions'
import { windowHeight } from '../../../../theme/appConstant'

export function Details({ rideDetails }: any) {
  const { viewRtlStyle, isDark, textRtlStyle } = useValues()
  const { colors } = useTheme()
  const navigation = useNavigation<any>()
  const { zoneValue } = useSelector((state: any) => state.zoneUpdate)

  const gotoPath = () => {
    navigation.navigate('MapDetails', {
      location: rideDetails?.location_coordinates,
    })
  }

  const formattedDate = apiformatDates(rideDetails.created_at)

  return (
    <View>
      <View
        style={[
          styles.main,
          { backgroundColor: colors.card, borderColor: colors.border },
        ]}
      >
        <DriverProfile
          rideDetails={rideDetails}
          borderRadius={windowHeight(25)}
          backgroundColor={appColors.white}
          iconColor={appColors.primary}
          showInfoIcon={false}
          showCarTitle={true}
          width={styles.width}
        />
        <View
          style={[
            styles.border,
            {
              backgroundColor: colors.background,
              marginVertical:
                rideDetails?.ride_status?.name !== 'Completed'
                  ? windowHeight(2)
                  : 0,
            },
          ]}
        />
        <View
          style={[
            styles.addressView,
            {
              marginTop:
                rideDetails?.ride_status?.name !== 'Completed'
                  ? windowHeight(-2)
                  : windowHeight(0),
            },
          ]}
        >
          <Address color={appColors.black} rideDetails={rideDetails} />
        </View>
      </View>
    </View>
  )
}
