import * as React from 'react';
import { useState } from 'react';
import { 
  TouchableOpacity, 
  View, 
  Text, 
  Alert 
} from 'react-native';
import { connect, useDispatch } from "react-redux";
import { openModal } from '../../redux/actions/AlertActions.js';
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';
import REQUEST from '../../components/api';

const Tracker = (navigation) => {
  const [fueltype, setfueltype] = useState('');
  const [datepicker, setdatepicker] = useState(false);
  const [date, setdate] = useState();
  const [distance, setdistance] = useState();
  const [liters, setliters] = useState();
  const [loading, setLoading] = useState(false);

  const Save = async () => {
    setLoading(true);
    let SESSION = await DB.session();

    REQUEST("tracker", "post", {
      Authorization: SESSION.token
    }, {}, {
      date: Theme.formatter.DT4API(date),
      fueltype_id: fueltype.id,
      km: distance,
      liters: liters,
      price: fueltype.price,
      kml: distance / liters,
      total: liters * fueltype.price,
    }, (res) => {
      const taskToShow = `\nFuel Efficiency tracker added`;
      navigation.route.params?.reload();
      setLoading(false);
      Alert.alert("Information", taskToShow, [{text: "OK", onPress: () => navigation.navigation.goBack()}]);
    }, (err) => {
      console.log(err)
      setLoading(false);
      Alert.alert("Information", `\n${err.message}`)
    }, "Tracker", "Save");
  }

  return (
    <CustomSafeArea>
      
      <CustomHeader title="Add Tracker" menu={false} back={true} backscreen="Tracker" navigation={navigation} />
      <View style={{paddingTop: 20, alignItems: 'center'}}>
        <CustomForm 
          items={
            [
              {
                name: "Date",
                type: "button",
                value: date,
                disabled: true,
                onFocus: () => date ? true : null,
                onClick: () => setdatepicker(true),
                onChangeText: (val) => setdate(val)
              },
              {
                name: "Fuel Type",
                type: "button",
                value: fueltype.name,
                disabled: true,
                onFocus: () => fueltype ? true : null,
                onClick: () => navigation.navigation.navigate("AddFuelType", { get: (val) => setfueltype(val), reload: () => navigation.route.params.reload()})
              },
              {
                kb: "numeric",
                name: "Distance Travelled",
                icon: 'info',
                value: Theme.formatter.CRNCYNOFIXED(distance),
                category: "KM",
                onChangeText: (val) => {
                  if(val && val.includes(".") && val.split(".")[1].length > 2) return;
                  if(val && (val.indexOf(".") !== val.lastIndexOf("."))) return;
                  if(val && !/^[\d,.]+$/.test(val)) return;
                  setdistance(val.replace(/,/g, ""));
                },
                onIconClick: () => Alert.alert("Information", '\n' + "To measure distance travelled, make sure to reset your trip meter every time you gas full tank.")
              },
              {
                kb: "numeric",
                name: "Liters Fueled up",
                value: Theme.formatter.CRNCYNOFIXED(liters),
                category: "L",
                onChangeText: (val) => {
                  if(val && val.includes(".") && val.split(".")[1].length > 2) return;
                  if(val && val.includes(".") && (val.indexOf(".") !== val.lastIndexOf("."))) return;
                  if(val && !/^[\d,.]+$/.test(val)) return;
                  setliters(val.replace(/,/g, ""));
                }
              }
            ]} 
        />
      </View>
      <View style={{flex: 1, justifyContent: 'flex-end', paddingBottom: 20}}>
        <TouchableOpacity 
          onPress={async () => {
              if(date && fueltype && distance && liters){                
                Save()
              }else{
                Alert.alert("Information", "\nPlease fill-up all the fields.");
              }
            }
          }
          style={{ width: '90%', marginLeft: '5%', borderRadius: 10, padding: 15, backgroundColor: Theme.colors.primary}}>
          <Text style={{alignSelf: 'center', color: '#fff', fontSize: 16, fontFamily: 'Arial'}}>Save Tracker</Text>
        </TouchableOpacity>
      </View>
      
      <Elements.CustomDatePicker 
        visible={datepicker}
        date={new Date()}
        showDate={false}
        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("MMMM DD, YYYY") : date != null ? date : null)
          setdatepicker(false)
        }}
        onCancel={() => setdatepicker(false)}
      />

      <Elements.loaderView 
        title="Validating"
        message="Please wait..."
        isDarkMode={navigation.app_theme?.theme.dark}
        backgroundColor={navigation.app_theme?.theme.colors.border}
        color={navigation.app_theme?.theme.colors.text}
        visible={loading} />
    </CustomSafeArea>
  );
}

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

const mapDispatchToProps = {
  openModal
}

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