import { View, Text, Image, TouchableOpacity, Linking } from 'react-native'
import React from 'react'
import Icons from '../../utils/icons/icons'
import commanStyle from '../../style/commanStyles'
import styles from './styles'
import { useTheme } from '@react-navigation/native'
import { useValues } from '../../utils/context'
import { fontSizes, windowHeight, windowWidth } from '../../theme/appConstant'
import appColors from '../../theme/appColors'
import appFonts from '../../theme/appFonts'
import { useAppNavigation } from '../../utils/navigation'
import { DriverProfileProps } from './type'
import { useSelector } from 'react-redux'

export function DriverProfile({
  borderRadius,
  pricestatus,
  userDetails,
  rideDetails,
  width,
  heigth,
  paddingBottom,
  otpsheet,
}: DriverProfileProps | any) {
  const navigation: any = useAppNavigation()
  const { colors } = useTheme()
  const { viewRtlStyle, isDark, rtl } = useValues()
  const { translateData } = useSelector((state: any) => state.setting)

  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 = rideDetails?.rider.phone
    Linking.openURL(`tel:${phoneNumber}`)
  }
  return (
    <View>
      <View
        style={[
          styles.profile,
          {
            backgroundColor: colors.card,
            flexDirection: viewRtlStyle,
            borderColor: colors.border,
            width: width,
            height: heigth,
            paddingBottom: paddingBottom,
          },
        ]}
      >
        <View style={[styles.subProfile, { flexDirection: viewRtlStyle }]}>
          {rideDetails?.rider?.driver_profile_image_url ? (
            <Image
              source={{ uri: rideDetails?.rider?.driver_profile_image_url }}
              style={[styles.userImage, { borderRadius: borderRadius }]}
            />
          ) : (
            <View
              style={[
                styles.userImage,
                {
                  borderRadius: borderRadius,
                  backgroundColor: isDark ? appColors.white : appColors.black,
                  justifyContent: 'center',
                  alignItems: 'center',
                },
              ]}
            >
              <Text
                style={{
                  fontSize: fontSizes.FONT4HALF,
                  fontFamily: appFonts.bold,
                  color: isDark ? appColors.black : appColors.white,
                }}
              >
                {rideDetails?.rider?.name?.charAt(0)?.toUpperCase()}
              </Text>
            </View>
          )}

          <View>
            <View
              style={[
                commanStyle.directionRow,
                {
                  flexDirection: viewRtlStyle,
                  marginHorizontal: windowWidth(4),
                  width: !rtl && '110%',
                },
              ]}
            >
              <View
                style={{
                  flexDirection: viewRtlStyle,
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  width: '50%',
                }}
              >
                <View
                  style={{ flexDirection: viewRtlStyle, alignItems: 'center' }}
                >
                  <Text style={[styles.userName, { color: colors.text }]}>
                    {userDetails?.name || rideDetails?.rider?.name}
                  </Text>
                  <View style={{ marginHorizontal: windowWidth(1) }}>
                    <Icons.Name />
                  </View>
                </View>
              </View>
              {pricestatus === true ? (
                <View>
                  <View
                    style={{
                      backgroundColor: colors.card,
                      width: windowWidth(24),
                      height: windowHeight(3.5),
                      alignItems: 'center',
                      justifyContent: 'center',
                      borderRadius: windowWidth(55),
                    }}
                  >
                    <Text
                      style={[
                        styles.idNo,
                        { color: colors.text, fontSize: fontSizes.FONT4HALF },
                      ]}
                    >
                      {rideDetails?.currency_symbol}
                      {rideDetails?.total}
                    </Text>
                  </View>
                </View>
              ) : (
                <View
                  style={{
                    backgroundColor: colors.background,
                    paddingHorizontal: windowWidth(4),
                    height: windowHeight(3.5),
                    alignItems: 'center',
                    justifyContent: 'center',
                    borderRadius: windowWidth(55),
                  }}
                >
                  <Text style={[styles.idNo, { color: colors.text }]}>
                    #{rideDetails?.ride_number}
                  </Text>
                </View>
              )}
            </View>

            <View style={{ flexDirection: viewRtlStyle }}>
              <View
                style={[styles.starContainer, { flexDirection: viewRtlStyle }]}
              >
                {Array.from({ length: 5 }).map((_, index) => {
                  const fullStarThreshold = index + 1
                  const halfStarThreshold = index + 0.5
                  if (rideDetails?.driver?.rating_count >= fullStarThreshold) {
                    return <Icons.RatingStar key={index} />
                  } else if (
                    rideDetails?.driver?.rating_count >= halfStarThreshold
                  ) {
                    return <Icons.RatingHalfStar key={index} />
                  } else {
                    return <Icons.RatingEmptyStar key={index} />
                  }
                })}
                <View style={{ flexDirection: viewRtlStyle }}>
                  <Text
                    style={[
                      commanStyle.totalReview,
                      {
                        color: isDark ? appColors.white : appColors.primaryFont,
                        left: windowWidth(0.5),
                        top: windowHeight(0.1),
                      },
                    ]}
                  >
                    {Number(rideDetails?.driver?.rating_count).toFixed(1)}
                  </Text>
                  <Text
                    style={{
                      color: appColors.secondaryFont,
                      left: windowWidth(0.5),
                      top: windowHeight(0.4),
                    }}
                  >
                    ({rideDetails?.driver?.review_count})
                  </Text>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>

      {pricestatus === true && (
        <View
          style={{
            height: windowHeight(0.6),
            width: '102%',
            backgroundColor: colors.background,
            alignSelf: 'center',
            marginBottom: windowHeight(2),
          }}
        />
      )}
      {otpsheet === true && (
        <View
          style={{
            height: windowHeight(0.6),
            width: '100%',
            backgroundColor: colors.background,
            alignSelf: 'center',
            marginBottom: windowHeight(2),
          }}
        />
      )}
      {rideDetails?.ride_status?.name !== 'Completed' && (
        <View
          style={[
            {
              flexDirection: viewRtlStyle,
              justifyContent: 'space-between',
              alignItems: 'center',
              marginHorizontal: windowWidth(4),
            },
          ]}
        >
          <TouchableOpacity
            activeOpacity={0.7}
            style={[styles.iconButton, { backgroundColor: colors.background }]}
            onPress={gotoChat}
          >
            <Text style={styles.text}>{translateData?.sendmsg}</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[
              styles.iconButton1,
              { borderColor: colors.border, marginHorizontal: 0 },
            ]}
            activeOpacity={0.7}
            onPress={gotoCall}
          >
            <Icons.Call color={appColors.white} />
          </TouchableOpacity>
        </View>
      )}
    </View>
  )
}
