import React, { useState } from 'react'
import { 
  View, 
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Image
} from 'react-native';
import { fullDateFormater } from '../../../utils/date';
import { useSelector } from 'react-redux';
import { useNavigation } from '@react-navigation/native';
import Elements from '../../../components/elements';
import LinearGradient from 'react-native-linear-gradient';
import Icon from '../../../components/icons';
import Theme from '../../../components/theme.style';
import IQAIRDetails from './IQAIRDetails';

const index = (props) => {
  const { 
    value,
    iqairData,
    id
  } = props.route.params;
  const { item } = value;

  const navigation = useNavigation();
  const app_theme = useSelector(state => state.appThemeReducer.theme);

  const dark = app_theme?.theme.dark;
  
  const [IQAir, setIQAir] = useState(iqairData);
  const [ID, setID] = useState(id);

  const onPressBack = () => {
    navigation.goBack();
  }

  const returnWeatherDate = () => {
    const newDate = fullDateFormater(IQAir.weather.ts);
    return newDate
  }

  return (
    <View style={[styles.container, dark && styles.darkBackground]}>
      <View style={styles.header} />
        
      <ScrollView 
        style={styles.scrollView}
        showsVerticalScrollIndicator={false}
      >
        <View style={styles.buttonContainer}>
          <TouchableOpacity onPress={onPressBack} style={styles.button}>
            <Icon.AntDesign name="arrowleft" size={20} style={styles.buttonIcon} />
          </TouchableOpacity>
          <Text style={styles.title}>IQAIR</Text>
          <View style={styles.button} />
        </View>
        
        <View style={styles.subContainer}>
          <LinearGradient colors={[Theme.colors.iqair[0].main, dark ? "#000000" : "#FFFFFF"]} style={{height: Theme.screen.h * .3, backgroundColor: 'white', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0}} />
          <View style={[styles.infoContainer, dark && styles.darkBackground]}>
            <Text style={styles.infoName}>{item.name}</Text>
            <Text style={[styles.infoAddress, dark && styles.darkText]}>{item.address}</Text>
          </View>

          <Elements.shadowView>
            <TouchableOpacity onPress={() => navigation.navigate("Guide")}>
              <IQAIRDetails iqair={IQAir} id={ID} />
            </TouchableOpacity>
          </Elements.shadowView>

          <Elements.shadowView>
            <View style={[styles.sensorByContainer, dark && styles.grayBackground(app_theme)]}>
              <Image source={require("../../../assets/iqair-unioil-mini.png")} style={styles.sensorByIcon}/>
              <Text style={[styles.sensorByText, dark && styles.darkText]} numberOfLines={1} adjustsFontSizeToFit >Sensor provide by Unioil Petroleum Philippines, Inc.</Text>
            </View>
          </Elements.shadowView>

          <Elements.shadowView>
            <View style={[styles.sensorByContainer, dark && styles.grayBackground(app_theme)]}>
              <Text style={[styles.sensorByText, dark && styles.darkText]} numberOfLines={1} adjustsFontSizeToFit>Last update {returnWeatherDate()}</Text>
            </View>
          </Elements.shadowView>

          <Elements.shadowView>
            <View style={[styles.comingSoonContainer, dark && styles.grayBackground(app_theme)]}>
              <Text style={[styles.comingSoonText, dark && styles.darkText]} numberOfLines={1} adjustsFontSizeToFit>Coming Soon</Text>
            </View>
          </Elements.shadowView>
        </View>
      </ScrollView>
    </View>
  )
}

export default index

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Theme.colors.white
  },
  header: {
    height: 50,
    backgroundColor: Theme.colors.primary,
    top: 0,
    left: 0,
    right: 0,
  },
  scrollView: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  buttonContainer: {
    height: 50,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 10,
  },
  button: {
    width: 30, 
    paddingVertical: 10
  },
  title: {
    flex: 1,
    textAlign: 'center',
    fontSize: 17, 
    color: Theme.colors.white,
    fontWeight: "bold"
  }, 
  buttonIcon: {
    color: Theme.colors.white
  },
  subContainer: {
    flex: 1
  },
  infoContainer: {
    width: '100%',
    alignItems: 'center',
    paddingTop: 20,
    paddingBottom: 30,
    borderBottomRightRadius: 400,
    borderBottomLeftRadius: 400,
    backgroundColor: Theme.colors.white
  },
  infoName: {
    color: Theme.colors.primary,
    fontSize: 20,
  },
  infoAddress: {
    color: Theme.colors.searchText,
    marginHorizontal: 55,
    fontSize: 15,
    marginTop: 5,
    textAlign: 'center'
  },
  darkText: {
    color: Theme.colors.white
  },
  darkBackground: {
    backgroundColor: Theme.colors.black
  },
  grayBackground: (appTheme) => {
    return {
      backgroundColor: appTheme?.theme.colors.border
    }
  },
  sensorByContainer: {
    marginTop: 10,
    backgroundColor: 'white',
    flexDirection: 'row',
    paddingVertical: 10,
    marginHorizontal: 35,
    borderRadius: 5,
    paddingHorizontal: 10,
    paddingVertical: 15,
    alignItems: 'center'
  },
  sensorByIcon: {
    height: 20, 
    width: 40
  },
  sensorByText: {
    flex: 1,
    paddingLeft: 9,
    paddingRight: 20,
    textAlign: 'center',
    fontSize: 10
  },
  comingSoonContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    height: Theme.screen.h * .3,
    paddingVertical: 10,
    backgroundColor: 'white',
    marginHorizontal: 35,
    marginTop: 10,
    marginBottom: 20
  },
  comingSoonText: {
    fontSize: 10
  }
})