import { Text, View } from 'react-native'
import React from 'react'
import { styles } from './styles'
import { useValues } from '../../utils/context'
import Icons from '../../utils/icons/icons'
import appColors from '../../theme/appColors'
import { useTheme } from '@react-navigation/native'
import { fontSizes, windowHeight, windowWidth } from '../../theme/appConstant'

export function LocationDetails({ locationDetails, item }: any) {
  const { viewRtlStyle, textRtlStyle, isDark, rtl } = useValues()
  const { colors } = useTheme()

  const hasDropLocation = !!locationDetails[0]
  const hasPickupLocation = !!locationDetails[1]

  return (
    <View style={[styles.addressContainer, { flexDirection: viewRtlStyle }]}>
      <View style={styles.locationContainer}>
        <View
          style={[
            styles.round,
            {
              backgroundColor: colors.background,
              borderColor: colors.background,
            },
          ]}
        >
          <Icons.location
            color={isDark ? appColors.white : appColors.primaryFont}
          />
        </View>
        {hasPickupLocation && item?.service_category?.service_category_type !== 'rental' && (
          <>
            <View style={styles.icon} />
            <View
              style={[
                styles.round,
                {
                  backgroundColor: colors.background,
                  borderColor: colors.background,
                },
              ]}
            >
              <Icons.gps
                color={isDark ? appColors.white : appColors.primaryFont}
              />
            </View>
          </>
        )}
      </View>

      <View style={styles.locationText}>
        {hasDropLocation && (
          <Text
            style={[
              styles.itemStyle,
              { textAlign: textRtlStyle },
              { color: isDark ? appColors.iconColor : appColors.iconColor },
            ]}
          >
            {locationDetails[0]?.length > 25
              ? `${locationDetails[0].slice(0, 25)}...`
              : locationDetails[0]}
          </Text>
        )}
        {item?.service?.service_type !== 'ambulance' && item?.service_category?.service_category_type !== 'rental' && (
          <View
            style={[
              styles.round,
              {
                borderColor: colors.border,
                backgroundColor: colors.card,
                position: 'absolute',
                alignSelf: rtl ? 'flex-start' : 'flex-end',
                marginTop: windowHeight(3.8),
                zIndex: 3,
                marginHorizontal: windowWidth(-12),
              },
            ]}
          >
            <Text
              style={{
                fontSize: fontSizes.FONT3,
                color: appColors.iconColor,
              }}
            >
              {item?.distance}
            </Text>
            <Text
              style={{
                fontSize: fontSizes.FONT3,
                color: appColors.iconColor,
              }}
            >
              {item?.distance_unit}
            </Text>
          </View>
        )}

        {item?.service_category?.service_category_type !== 'rental' && (
          <>
            {hasDropLocation && hasPickupLocation && (
              <View
                style={[
                  styles.dashedLine,
                  {
                    borderColor: colors.border,
                    alignSelf: rtl ? 'flex-end' : 'flex-start'
                  },
                ]}
              />
            )}

            {hasPickupLocation && (
              <Text
                style={[
                  styles.pickUpLocationStyles,
                  { textAlign: textRtlStyle, color: isDark ? appColors.iconColor : appColors.iconColor },
                ]}
              >
                {locationDetails[1]?.length > 25
                  ? `${locationDetails[1].slice(0, 25)}...`
                  : locationDetails[1]}
              </Text>
            )}
          </>
        )}

      </View>
    </View>
  )
}
