unioil-loyalty-rn-app/app/screens/iqair/map/Map/IQAIRDetails.js

import React, { useEffect, useState } from 'react'
import {
  Image, 
  View, 
  Text, 
  StyleSheet,
  TouchableOpacity,
  ActivityIndicator,
  Platform
} from 'react-native';
import { 
  returnStatus, 
  returnIcon,
  returnStatusId 
} from '../../../../utils/IQAIRhelper';
import { useSelector } from 'react-redux';
import Icon from '../../../../components/icons';
import API from '../../../../components/api/iqair';
import Theme from '../../../../components/theme.style';
import Elements from '../../../../components/elements';
import { useNavigation } from '@react-navigation/native';

const IQAIRDetails = (props) => {
  const navigation = useNavigation();
  const app_theme = useSelector(state => state.appThemeReducer.theme);
  const dark = app_theme.theme.dark;

  const [IQAir, setIQAir] = useState(undefined);
  const [loading, setLoading] = useState(false);
  const [ID, setID] = useState(0);

  useEffect(() => {
    if(props.selected) init();
  }, [props.selected])

  const init = () => {
    setLoading(true);
    setTimeout(() => {
      const data = {
        lat: props.selected.latitude,
        lon: props.selected.longitude
      }

      API(data, (res) => {
          const aqius = res.data.current.pollution.aqius || res.data.current.weather.tp;
          setID(returnStatusId(aqius));
          setIQAir(res.data.current);
          setLoading(false);
      }, (err) =>{
          setTimeout(() => {
              init();
          }, 2000)
      })
    }, 1000)
  }

  const onPress = () => {
    navigation.navigate("Details", {
      value: { item: props.item },
      iqairData: IQAir,
      id: ID
    })
  }

  if(!props.selected) return null;

  return (
    <TouchableOpacity disabled={loading} onPress={onPress} style={styles.container}>
      <Elements.shadowView>
        <View style={[styles.renderItem, dark && styles.darkBackground(app_theme)]}>
         <View style={styles.firstRow}>
            {
              Platform.OS === 'android' ?
                <Icon.MaterialIcons name="location-on" size={25} color={Theme.colors.primary} />
                :
                <Icon.Ionicons name="location" size={25} color={Theme.colors.primary} />
            }
            <View style={styles.infoContainer}>
                <Text style={[styles.nameText, styles.darkColor(app_theme)]}>{props.item.name}</Text>
                <Text style={[styles.addressText, styles.darkColor(app_theme)]}>{props.item.address}</Text>
            </View>
          </View>
          <View style={styles.secondRow}>
            { loading ? 
              <View style={styles.activityIndicator}>
                <ActivityIndicator />
              </View>
              :
              <>
                <View style={styles.iconContainer}>
                  <Elements.shadowView style={styles.iconShadow}>
                    <Image source={returnIcon(ID)} style={styles.icon}/>
                  </Elements.shadowView>
                </View>
                <View style={styles.airlevelContainer(ID)}>
                  <Text style={styles.airlevelTitle}>{IQAir?.pollution.aqius || IQAir?.weather.tp} *</Text>
                  <Text style={styles.airlevelIndicator}>US AQI</Text>
                </View>
                <View style={styles.statusContainer(ID)}>
                  <Text style={styles.statusText} numberOfLines={2} adjustsFontSizeToFit >{returnStatus(ID).title}</Text>
                </View>
              </>
            }
          </View>
          <View style={styles.thirdRow}>
            { loading ? 
                <View style={styles.activityIndicator}>
                  <ActivityIndicator />
                </View>
                :
                <>
                  <View style={styles.water}>
                    <Image style={styles.waterIcon} source={require("../../../../assets/iqairwater.png")}/>
                    <Text style={[styles.infoText, styles.darkColor(app_theme)]}>{IQAir?.weather.hu}%</Text>
                  </View>
                  <View style={styles.wind}>
                    <Image style={styles.airIcon} source={require("../../../../assets/iqairwind.png")}/>
                    <Text style={[styles.infoText, styles.darkColor(app_theme)]}>{(IQAir?.weather.ws * 3.6).toFixed(2)} km/h</Text>
                  </View>
                  <View style={styles.cloud}>
                    <Image style={styles.cloudIcon} source={require("../../../../assets/iqaircloud.png")}/>
                    <Text style={[styles.infoText, styles.darkColor(app_theme)]}>{IQAir?.weather.tp}°</Text>
                  </View>
                </>
            }
          </View>
        </View>
      </Elements.shadowView>
    </TouchableOpacity>
  )
}

export default IQAIRDetails

const styles = StyleSheet.create({ 
  container: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    paddingVertical: 10,
    paddingHorizontal: 10
  },
  renderItem: {
    backgroundColor: 'white',
    borderRadius: 5,
    marginHorizontal: 18,
    paddingHorizontal: 10,
    paddingBottom: 10,
    paddingVertical: 8,
  },
  firstRow: {
    flexDirection: 'row',
    height: 50,
  },
  infoContainer: {
    flex: 1,
    marginLeft: 8
  },
  nameText: {
    color: Theme.colors.searchText,
    fontSize: 14
  },
  addressText: {
    color: Theme.colors.searchText,
    fontSize: 10,
    marginTop: 2
  },
  secondRow: {
    flexDirection: 'row',
    height: 70,
    flex: 1,
    marginTop: 5
  },
  iconContainer: {
    flex: .25, 
    backgroundColor: Theme.colors.whitesmoke, 
    alignItems: 'center', 
    justifyContent: 'center',
    borderTopLeftRadius: 5,
    borderBottomLeftRadius: 5
  },
  iconShadow: {
      alignItems: 'center', 
      justifyContent: 'center'
  },
  icon: {
      height: '75%', 
      resizeMode: 'contain',
  },
  airlevelContainer: (id) => {
    return {
      flex: .33, 
      backgroundColor: 
      Theme.colors.iqair[id].opacity, 
      alignItems: 'center', 
      justifyContent: 'center'
    }
  },
  airlevelTitle: {
    color: Theme.colors.white, 
    fontSize: 25
  },
  airlevelIndicator: {
    color: Theme.colors.white, 
    fontSize: 11
  },
  statusContainer: (id) => {
    return {
      flex: .5, 
      borderRadius: 5, 
      backgroundColor: Theme.colors.iqair[id].main, 
      left: -10, 
      justifyContent: 'center', 
      alignItems: 'center'
    }
  },
  statusText: {
    color: Theme.colors.white, 
    fontSize: 12, 
    fontWeight: 'bold', 
    textAlign: 'center'
  },
  thirdRow: {
    flexDirection: 'row',
    flex: 1,
    height: 20,
    alignItems: 'center',
    marginTop: 14,
    marginBottom: 5
  },
  water: {
    flex: .25,
    borderRightWidth: 1,
    borderColor: Theme.colors.gray,
    flexDirection: 'row',
    alignItems: 'center'
  },
  waterIcon: {
    marginRight: 3,
    height: 15,
    width: 15,
    resizeMode: 'contain'
  },
  wind: {
    flex: .33,
    flexDirection: 'row',
    alignItems: 'center'
  },
  airIcon: {
    height: 20,
    width: 20,
    marginLeft: 10,
    resizeMode: 'contain'
  },
  cloud: {
    left: -10,
    flex: .37,
    borderColor: Theme.colors.gray,
    borderLeftWidth: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  cloudIcon: {
    height: 20,
    width: 20,
    resizeMode: 'contain',
    marginHorizontal: 4,
    marginLeft: 15
  },
  activityIndicator: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  infoText: {
    fontSize: 10, 
    color: Theme.colors.searchText
  },
  darkColor: (appTheme) => {
    if(appTheme?.theme.dark) {
        return {
            color: Theme.colors.white
        }
    }
  },
  darkBackground: (appTheme) => {
    return {
      backgroundColor: appTheme?.theme.colors.border
    }
  }
})