import React from 'react'
import {
  Image, 
  View, 
  Text, 
  StyleSheet,
} from 'react-native';
import { 
  returnStatus, 
  returnIcon,
} from '../../../utils/IQAIRhelper';
import Theme from '../../../components/theme.style';
import Elements from '../../../components/elements';
import { useSelector } from 'react-redux';

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

    const IQAir = props.iqair;
    const ID = props.id;

    return (
        <View style={[styles.renderItem, dark && styles.darkBackground(app_theme)]}>
            <View style={styles.secondRow}>
                <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}>
                <View style={styles.water}>
                    <Image style={styles.waterIcon} source={require("../../../assets/iqairwater.png")}/>
                    <Text style={[styles.infoText, dark && styles.darkText(app_theme)]}>{IQAir?.weather.hu}%</Text>
                </View>
                <View style={styles.wind}>
                    <Image style={styles.airIcon} source={require("../../../assets/iqairwind.png")}/>
                    <Text style={[styles.infoText, dark && styles.darkText(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, dark && styles.darkText(app_theme)]}>{IQAir?.weather.tp}°</Text>
                </View>
            </View>
        </View>
    )
}

export default IQAIRDetails

const styles = StyleSheet.create({
  renderItem: {
    marginTop: 20,
    backgroundColor: 'white',
    borderRadius: 5,
    marginHorizontal: 35,
    paddingHorizontal: 10,
    paddingBottom: 10,
    paddingVertical: 8,
  },
  secondRow: {
    flexDirection: 'row',
    height: 70,
    marginTop: 5,
    height: 70,
  },
  iconContainer: {
    flex: .25, 
    borderTopLeftRadius: 5,
    borderBottomLeftRadius: 5,
    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',
    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
  },
  darkText: (appTheme) => {
    return {
        color: appTheme?.theme.colors.text
    }
  },
  darkBackground: (appTheme) => {
    return {
        backgroundColor: appTheme.theme.colors.border
    }
  }
})