import { View, TouchableOpacity, Linking, Text } from 'react-native'
import React from 'react'
import { TaxiDetails } from '../../../endRide/component'
import commanStyle from '../../../../../style/commanStyles'
import Icons from '../../../../../utils/icons/icons'
import styles from './styles'
import appColors from '../../../../../theme/appColors'
import { Address, DriverProfile } from '../../../../../commonComponents'
import { useTheme } from '@react-navigation/native'
import { useValues } from '../../../../../utils/context'
import { useAppNavigation } from '../../../../../utils/navigation'
import { windowHeight, windowWidth } from '../../../../../theme/appConstant'
import { useSelector } from 'react-redux'

export function Profile({ userDetails, rideDetails }) {
  const { colors } = useTheme()
  const { viewRtlStyle } = useValues()
  const navigation = useAppNavigation()

  const gotoChat = () => {
    navigation.navigate('Chat', {
      driverId: rideDetails?.driver?.id,
      riderId: rideDetails?.rider?.id,
      rideId: rideDetails?.id,
      riderName: rideDetails?.rider?.name,
      riderImage: rideDetails?.rider?.profile_image?.original_url,
    })
  }

  const gotoCall = () => {
    const phoneNumber = userDetails.phone
    Linking.openURL(`tel:${phoneNumber}`)
  }
  const { translateData } = useSelector((state: any) => state.setting)

  return (
    <View
      style={[
        styles.box,
        { backgroundColor: colors.card, borderColor: colors.border },
      ]}
    >
      <View style={[styles.profile, { flexDirection: viewRtlStyle }]}>
        <DriverProfile
          borderRadius={windowHeight(25)}
          backgroundColor={appColors.white}
          iconColor={appColors.primary}
          showCarTitle={true}
          showInfoIcon={false}
          userDetails={userDetails}
          rideDetails={rideDetails}
          width={'90%'}
        />
      </View>
      <View
        style={[
          commanStyle.containerBtn,
          {
            flexDirection: viewRtlStyle,
            alignItems: 'center',
            justifyContent: 'space-between',
          },
        ]}
      >
        <TouchableOpacity
          style={[styles.button, { backgroundColor: colors.background }]}
          onPress={gotoChat}
          activeOpacity={0.7}
        >
          <Text style={styles.text}>{translateData?.sendmsg}</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.iconButton1}
          activeOpacity={0.7}
          onPress={gotoCall}
        >
          <Icons.Call color={appColors.white} />
        </TouchableOpacity>
      </View>
      <View style={[styles.dashBorder, { borderColor: colors.background }]} />
      <View style={{ marginHorizontal: windowWidth(3) }}>
        <Address rideDetails={rideDetails} />
      </View>
    </View>
  )
}
