import * as React from 'react';
import { 
  ScrollView, 
  TouchableOpacity, 
  ImageBackground, 
  View,
  Text, 
  Alert
} from 'react-native';
import { 
  useState, 
  useEffect 
} from 'react';
import { connect } from "react-redux";
import NetInfo from "@react-native-community/netinfo";
import CustomHeader from '../../components/header.js';
import Assets from '../../components/assets.manager.js';
import Theme from '../../components/theme.style.js';
import Icon from '../../components/icons.js';
import Elements from '../../components/elements.js';
import DB from '../../components/storage/';
import moment from 'moment';
import CustomSafeArea from '../../components/safeArea.component.js';
// import {Toast} from 'native-base';

const Banner = (props) => {
  return (<ImageBackground source={Assets.boarding[3]} style={{flex: 1, justifyContent: 'flex-end', alignItems: 'center'}}>
    <View style={{flex: 1, width: '100%', height: '100%', backgroundColor: 'rgba(0,0,0,0.3)', padding: 30, justifyContent: 'flex-end', alignItems: 'center'}}>
      <Text style={{alignSelf:'center', color: '#fff', fontFamily: 'Arial', fontSize: 16, marginBottom: 15}}>Track your gas consumption and mileage</Text>
      <TouchableOpacity onPress={props.onPress} style={{alignSelf:'center', padding: 15, marginBottom: 20, backgroundColor: Theme.colors.primary, borderRadius: 7}}>
        <Text style={{fontSize: 16, fontFamily: 'Arial', color: "#fff"}}>Add Tracker</Text>
      </TouchableOpacity>
    </View>
  </ImageBackground>)
}

const Tracker = (navigation) => {
  
  const params = navigation.route ? navigation.route.params : null
  const [connected, setconnected] = useState(false)
  const [popup, setpopup] = useState(false)
  const [loaded, setloaded] = useState(false)
  const [trackers, settrackers] = useState([])
  const [Task, setTask] = useState("")

  const fetch = (cn, data) => {
    let res = []
    for(var x=0;x<data.length;x++){
      if(data[x].card_number === cn) res.push(data[x])
    }
    return res.sort((a, b) => {
      return new moment(a.date).format('x') - new moment(b.date).format('x')
    })
  }

  const init = async () => {
    setconnected(true)
    const SESSION = await DB.session()
    const TRACKS = await DB.get("tracker")
    let tracks = TRACKS ? JSON.parse(TRACKS) : []
    settrackers(fetch(SESSION.user.card_number, tracks))
    setloaded(true)
  }

  useEffect(() => {
    NetInfo.fetch().then(state => {
      console.log("Connection type", state.type);
      console.log("Is connected?", state.isConnected);
      if(state.isConnected){
        init()
      }else{
        Elements.nointernet2(navigation)
      }
    })
  }, [])

  const onReload = (task) => {
    init();
  }

  const renderTrackings = () => {
    return trackers.map((data, index) => {
      let estimate = parseFloat(parseInt(data.distance) / parseInt(data.liters)).toFixed(2)
      return (
        <TouchableOpacity onPress={() => navigation.navigation.navigate("EditTracker", {
          edit: data,
          reload: (task) => onReload(task)
        })} key={index} style={{padding: 15, flexDirection: 'column', backgroundColor: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.border : '#fff', borderRadius: 5, borderWidth: 0.5, marginBottom: 5, borderColor: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.border : 'lightgray', elevation: 0.5}}>
          <View style={{flex: 1, alignSelf: 'flex-end', color: Theme.colors.darkGray}}>
            <Text style={{ color: navigation.app_theme?.theme.colors.text }}>{data.date}</Text>
          </View>
          <View style={{flex: 1, flexDirection: 'row'}}>
            <Text style={{flex: 0, fontSize: 8, color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.primary, marginTop: 15, fontWeight: 'bold'}}>km/L</Text>
            <Text style={{flex: 1, fontSize: 24, padding: 5, marginLeft: 5, fontWeight: 'bold', color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.darkerGray}}>
              {estimate}
            </Text>
          </View>
          <View style={{flex: 1, flexDirection: 'row', marginTop: 5}}>
            <Text style={{flex: 0, padding: 5, paddingLeft: 0}}>
              <Icon.MaterialCommunityIcons name="gas-station" size={12} color={Theme.colors.primary} />
            </Text>
            <Text style={{flex: 1, paddingTop: 2, color: navigation.app_theme?.theme.colors.text}}>{data.fueltype}</Text>
          </View>
          <View style={{flex: 1, flexDirection: 'row', marginTop: 5}}>
            <Text style={{flex: 0, padding: 5, paddingLeft: 0}}>
              <Icon.FontAwesome name="dashboard" size={12} color={Theme.colors.primary} />
            </Text>
            <Text style={{flex: 1, paddingTop: 2, color: navigation.app_theme?.theme.colors.text}}>{Theme.formatter.CRNCY(data.distance.split(" ")[0]).replace(".00", "") + " km"}</Text>
          </View>
          <View style={{flex: 1, flexDirection: 'row', marginTop: 5}}>
            <Text style={{flex: 0, padding: 5, paddingLeft: 0}}>
              <Icon.MaterialCommunityIcons name="fuel" size={12} color={Theme.colors.primary} />
            </Text>
            <Text style={{flex: 1, paddingTop: 2, color: navigation.app_theme?.theme.colors.text}}>{Theme.formatter.CRNCY(data.liters.split(" ")[0]).replace(".00", "") + " L"}</Text>
          </View>
        </TouchableOpacity>
      )
    })
  }

  if(!connected){
    return (
      <View style={{flex: 1, flexDirection: 'column'}}>
        <CustomHeader title="Fuel Efficiency Tracker" menu={false} navigation={navigation} top={45} />
        <Elements.nointernet 
          message="No internet found. Please check your internet connection." 
          buttonText="Try Again" 
          onPress={() => {
            NetInfo.fetch().then(state => {
              console.log("Connection type", state.type);
              console.log("Is connected?", state.isConnected);
              if(state.isConnected){
                init()
              }else{
                Elements.nointernet2(navigation)
              }
            })
          }}
        />
      </View>
    )
  }

  return (
    <CustomSafeArea>
      <CustomHeader title="Fuel Efficiency Tracker" menu={false} navigation={navigation} />
      {trackers.length == 0 && loaded ? 
        <Banner onPress={() => navigation.navigation.navigate("AddTracker", {
          reload: (task) => onReload(task)
        })} /> : null}
      {trackers.length > 0 && loaded ?
        <View style={{flexDirection: 'column', flex: 1}}>
          <ScrollView style={{flex: 1, padding: 10}}>
            {renderTrackings()}
            <View style={{margin: 15}}></View>
          </ScrollView>
          <TouchableOpacity onPress={() => navigation.navigation.navigate("AddTracker", {
            reload: (task) => onReload(task)
          })} 
            style={{
              justifyContent: 'center',
              alignItems: 'center',
              position: 'absolute',
              bottom: popup ? 65 : 15,
              right: 15,
              width: 60,
              height: 60,
              borderRadius: 30,
              backgroundColor: Theme.colors.primary,
              shadowColor: "#000000",
              elevation: 7
            }}
          >
            <Icon.Feather name="plus" color="#fff" size={25} />
          </TouchableOpacity>
        </View> : null
      }
      {/* <Elements.popup visible={popup} message={`Fuel Efficiency tracker ${Task != "" ? Task : null}.`} /> */}
    </CustomSafeArea>
  );
}

const mapStateToProps = (state) => {
  return {
    app_theme: state.appThemeReducer.theme
  }
}

export default connect(mapStateToProps, null)(Tracker)