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

const IQAIRDetails = (props) => {
  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) => {
          console.log('the res: ' + JSON.stringify(res.data));
          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)
  }

  if(!props.selected) return null;

  return (
    <View style={styles.container}>
      <Elements.shadowView>
        <View style={styles.renderItem}>
          <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}>{IQAir?.weather.hu}%</Text>
                    </View>
                    <View style={styles.wind}>
                      <Image style={styles.airIcon} source={require("../../../../assets/iqairwind.png")}/>
                      <Text style={styles.infoText}>{(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}>{IQAir?.weather.tp}°</Text>
                    </View>
                </>
            }
          </View>
        </View>
      </Elements.shadowView>
    </View>
  )
}

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,
  },
  secondRow: {
    flexDirection: 'row',
    height: 70,
    flex: 1,
    marginTop: 5
  },
  iconContainer: {
    flex: .25, 
    backgroundColor: Theme.colors.whitesmoke, 
    alignItems: 'center', 
    justifyContent: 'center'
  },
  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
  }
})