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

interface AddressDataProps {
  color?: string
  locationDetails?: any[]
  rideDetails?: any
}

export function AddressData({
  locationDetails = [],
  rideDetails,
}: AddressDataProps) {
  const { colors } = useTheme()
  const { viewRtlStyle, textRtlStyle, isDark, rtl } = useValues()

  if (locationDetails.length === 0) return null

  const isSingle = locationDetails.length === 1

  return (
    <View style={[styles.address1, { flexDirection: viewRtlStyle }]}>
      <View style={[styles.alignment, { flexDirection: viewRtlStyle }]}>
        <View>
          <View style={[styles.round, { backgroundColor: colors.background }]}>
            <Icons.location color={colors.text} />
          </View>
          {!isSingle && rideDetails?.service_category?.service_category_type !== 'rental' && (
            <>
              <View style={styles.verticalDot} />
              <View
                style={[styles.round, { backgroundColor: colors.background }]}
              >
                <Icons.gps
                  color={isDark ? appColors.white : appColors.primaryFont}
                />
              </View>
            </>
          )}
        </View>

        <View style={styles.spaceRight}>
          <Text
            style={[
              commanStyle.pickup,
              {
                color: appColors.iconColor,
                textAlign: textRtlStyle,
                marginTop: windowHeight(1.5),
                width: windowWidth(55)
              },
            ]}
          >
            {locationDetails[0].length > 30
              ? `${locationDetails[0].slice(0, 30)}...`
              : locationDetails[0]}
          </Text>

          {!isSingle && locationDetails[1] && rideDetails?.service_category?.service_category_type !== 'rental' && (
            <>
              <View
                style={[
                  styles.round1,
                  { backgroundColor: colors.card, borderColor: colors.border, alignSelf: rtl ? 'flex-start' : 'flex-end' },
                ]}
              >
                <Text style={styles.km}>{rideDetails?.distance}</Text>
                <Text style={styles.km}>{rideDetails?.distance_unit}</Text>
              </View>
              <View
                style={[
                  styles.border,
                  {
                    backgroundColor: colors.border,
                    marginBottom: windowHeight(2.5),
                    alignSelf: rtl ? 'flex-end' : 'flex-start'
                  },
                ]}
              />
              <Text
                style={[
                  commanStyle.drop,
                  {
                    color: appColors.iconColor,
                    textAlign: textRtlStyle,
                    marginVertical: windowHeight(0),
                    marginBottom: windowHeight(1.5),
                    width: windowWidth(55)
                  },
                ]}
              >
                {locationDetails[1].length > 28
                  ? `${locationDetails[1].slice(0, 28)}...`
                  : locationDetails[1]}{' '}
              </Text>
            </>
          )}
        </View>
      </View>
    </View>
  )
}
