import * as React from 'react';
import { useState } from 'react';
import { 
  TouchableOpacity, 
  View, 
  Text, 
  Alert 
} from 'react-native';
import { connect } from "react-redux";
import { Container } from 'native-base';
import CustomHeader from '../../components/header.js';
import Theme from '../../components/theme.style.js';
import Elements from '../../components/elements.js';
import DB from '../../components/storage';
import moment from 'moment';
import CustomForm from './customform';
import CustomSafeArea from '../../components/safeArea.component.js';

const Tracker = (navigation) => {
  
  const [fueltype, setfueltype] = useState('');
  const [datepicker, setdatepicker] = useState(false);
    
  // const fueltype = params.fuelType ? params.fuelType : "";
  const [date, setdate] = useState(null);
  const [distance, setdistance] = useState(null);
  const [liters, setliters] = useState(null);


  const Save = async () => {
    let SESSION = await DB.session()
    let TRACKS = await DB.get("tracker")
    let tracks = TRACKS ? JSON.parse(TRACKS) : []
    let data = {
      card_number: SESSION.user.card_number,
      id: tracks.length == 0 ? tracks.length + 1 : tracks[tracks.length - 1].id + 1,
      date: date,
      fueltype: fueltype,
      distance: distance,
      liters: liters
    }
    tracks.push(data)

    await DB.set("tracker", JSON.stringify(tracks), function(){
      navigation.route.params?.reload("added")
      navigation.navigation.goBack()
      // navigation.navigation.navigate("Tracker", {activity: 1})
    }, function(error){
      console.log("Failed to add:", error)
    })
  }

  return (
    <CustomSafeArea>
      <CustomHeader title="Add Tracker" menu={false} back={true} backscreen="Tracker" navigation={navigation} />
      <Container>
        <View style={{marginTop: 20, padding: 0}}>
          <CustomForm 
            items={
              [
                {
                  name: "Date",
                  value: date,
                  disabled: true,
                  onFocus: () => date ? true : null,
                  onClick: () => setdatepicker(true),
                  onChangeText: (val) => setdate(val)
                },
                {
                  name: "Fuel Type",
                  value: fueltype,
                  disabled: true,
                  onFocus: () => fueltype ? true : null,
                  onClick: () => navigation.navigation.navigate("AddFuelType", {get: (val) => setfueltype(val)})
                },
                {
                  kb: "numeric",
                  name: "Distance Travelled",
                  icon: 'information-circle',
                  value: distance,
                  maxLength: 5,
                  onChangeText: (val) => setdistance(val),
                  onFocus: () => distance ? setdistance(distance.includes(" km") ? distance.replace(" km", "") : distance) : null,
                  onBlur: () => distance ? setdistance(distance +  " km") : null,                
                  onIconClick: () => Alert.alert("Information", "To measure distance travelled, make sure to reset your trip meter every time you gas full tank.")
                },
                {
                  kb: "numeric",
                  name: "Liters Fueled up",
                  value: liters,
                  maxLength: 5,
                  onBlur: () => liters ? setliters(liters +  " L") : null,
                  onChangeText: (val) => setliters(val)
                }
              ]} 
          />
        </View>
        <TouchableOpacity 
          onPress={async () => 
            {
              if(date && fueltype && distance && liters){                
                Save()
              }else{
                Alert.alert("Error", "Please fill-up all the fields.")
              }
            }
          }
          style={{ width: '90%', marginLeft: '5%', marginTop: Theme.screen.h / 3, borderRadius: 10, padding: 15, backgroundColor: Theme.colors.primary}}>
          <Text style={{alignSelf: 'center', color: '#fff', fontSize: 16, fontFamily: 'Arial'}}>Save Tracker</Text>
        </TouchableOpacity>
      </Container>
      
      <Elements.CustomDatePicker 
        visible={datepicker}
        date={date ? new Date(date) : new Date(Date.now())}
        textColor={navigation.app_theme?.theme.colors.text}
        isDarkMode={navigation.app_theme?.theme.dark}
        modalBackgroundColor={navigation.app_theme?.theme.colors.border}  
        onConfirm={(selectedDate) => {
          setdate(selectedDate ? moment(selectedDate).format("DD MMM YYYY") : date != null ? date : null)
          setdatepicker(false)
        }}
        onCancel={() => setdatepicker(false)}/>
    </CustomSafeArea>
  );
}

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

export default connect(mapStateToProps, null)(Tracker);