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


const Tracker = (navigation) => {
  
  const [focus, setfocus] = useState(false);
  const [activeInput, setActiveInput] = useState(false);
  const [datepicker, setdatepicker] = useState(false);
    
  const params = navigation.route ? navigation.route.params : null
  const [date, setdate] = useState(null);
  const [fueltype, setfueltype] = useState(null);
  const [distance, setdistance] = useState(null);
  const [liters, setliters] = useState(null);

  const [update, setupdate] = useState(false);

  if(params.edit && !update){
    setdate(params.edit.date)
    setfueltype(params.edit.fueltype)
    setdistance(params.edit.distance)
    setliters(params.edit.liters)
    setupdate(true)
  }

  const isFocused = (index) => {
    return focus && activeInput == index
  }

  const DeleteTracker = async () => {
    let TRACKS = await DB.get("tracker")
    let tracks = TRACKS ? JSON.parse(TRACKS) : []
    let result = []
	  for(var x=0;x<tracks.length;x++){
    	if(params.edit.id == tracks[x].id){
        continue
      }else{
        result.push(tracks[x])
      }
    }
    DB.set("tracker", JSON.stringify(result), function(){
      onDone("deleted")
    }, function(error){
      console.log(error)
    })
  }

  const Update = async () => {
    let TRACKS = await DB.get("tracker")
    let tracks = TRACKS ? JSON.parse(TRACKS) : []
	  for(var x=0;x<tracks.length;x++){
    	if(params.edit.id == tracks[x].id){
        tracks[x].date = date,
        tracks[x].fueltype = fueltype,
        tracks[x].distance = distance,
        tracks[x].liters = liters
      }
    }
    await DB.set("tracker", JSON.stringify(tracks), function(){
      onDone("updated")
    }, function(error){
      console.log("Failed to add:", error)
    })
  }

  const onDone = (task) => {
    navigation.route.params?.reload(task)
    navigation.navigation.goBack()
  }

  return (
    <CustomSafeArea>
      <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)}/>
      <CustomHeader 
        title="Edit Tracker" 
        menu={false} 
        back={true} 
        backscreen="Tracker" 
        navigation={navigation}
        rightMenu={
          <TouchableOpacity onPress={() => Alert.alert("Fuel Tracker", "Do you want to delete this fuel tracker?", 
            [{
              text: 'Cancel',
              style: 'cancel',
            },{
              text: 'OK', onPress: () => DeleteTracker()
            },],
            {cancelable: true}
          )} style={{alignSelf: 'flex-end', right: 10}}>
            <CustomIcon.MaterialIcons name="delete" size={25} color="#fff" />
          </TouchableOpacity>
        }/>

      <Container style={{flex: 1}}>
        <View style={{marginTop: 20, padding: 0}}>
          <CustomForm 
            items={
              [
                {
                  name: "Date",
                  value: date,
                  disabled: true,
                  onClick: () => setdatepicker(true),
                  onChangeText: (val) => setdate(val)
                },
                {
                  name: "Fuel Type",
                  value: fueltype,
                  disabled: true,
                  onClick: () => navigation.navigation.navigate("AddFuelType", {get: (val) => setfueltype(val)})
                },
                {
                  kb: "numeric",
                  name: "Distance Travelled",
                  icon: 'information-circle',
                  value: distance,
                  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,
                  onFocus: () => liters ? setliters(liters.includes(" km") ? liters.replace(" km", "") : liters) : null,
                  onBlur: () => liters ? setliters(liters +  " L") : null,
                  onChangeText: (val) => setliters(val)
                }
              ]}/>
        </View>
        <TouchableOpacity 
          onPress={Update} 
          style={{marginTop: '80%', 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>
      </Container>
    </CustomSafeArea>
  );
}

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

export default connect(mapStateToProps, null)(Tracker)

// export default function Tracker(navigation) {
  
//   const [focus, setfocus] = useState(false);
//   const [activeInput, setActiveInput] = useState(false);
//   const [datepicker, setdatepicker] = useState(false);
    
//   const params = navigation.route ? navigation.route.params : null
//   const [date, setdate] = useState(null);
//   const [fueltype, setfueltype] = useState(null);
//   const [distance, setdistance] = useState(null);
//   const [liters, setliters] = useState(null);

//   const [update, setupdate] = useState(false);

//   if(params.edit && !update){
//     setdate(params.edit.date)
//     setfueltype(params.edit.fueltype)
//     setdistance(params.edit.distance)
//     setliters(params.edit.liters)
//     setupdate(true)
//   }

//   // console.log(params);

//   const isFocused = (index) => {
//     return focus && activeInput == index
//   }

//   const DeleteTracker = async () => {
//     let TRACKS = await DB.get("tracker")
//     let tracks = TRACKS ? JSON.parse(TRACKS) : []
//     let result = []
// 	  for(var x=0;x<tracks.length;x++){
//     	if(params.edit.id == tracks[x].id){
//         continue
//       }else{
//         result.push(tracks[x])
//       }
//     }
//     DB.set("tracker", JSON.stringify(result), function(){
//       // navigation.navigation.navigate("Tracker", {activity: 3})
//       onDone("deleted")
//     }, function(error){
//       console.log(error)
//     })
//   }

//   const Update = async () => {
//     let TRACKS = await DB.get("tracker")
//     let tracks = TRACKS ? JSON.parse(TRACKS) : []
// 	  for(var x=0;x<tracks.length;x++){
//     	if(params.edit.id == tracks[x].id){
//         // tracks[x] = {
//         //   id: tracks[x].id,
//         //   date: date,
//         //   fueltype: fueltype,
//         //   distance: distance,
//         //   liters: liters
//         // }
//         tracks[x].date = date,
//         tracks[x].fueltype = fueltype,
//         tracks[x].distance = distance,
//         tracks[x].liters = liters
//       }
//     }
//     await DB.set("tracker", JSON.stringify(tracks), function(){
//       // navigation.navigation.navigate("Tracker", {activity: 2})
//       onDone("updated")
//     }, function(error){
//       console.log("Failed to add:", error)
//     })
//   }

//   const onDone = (task) => {
//     navigation.route.params?.reload(task)
//     navigation.navigation.goBack()
//   }

//   return (
//     <SafeAreaView style={{flex: 1}}>

//       <Elements.CustomDatePicker 
//         visible={datepicker}
//         date={date ? new Date(date) : new Date(Date.now())} 
//         onConfirm={(selectedDate) => {
//           setdate(selectedDate ? moment(selectedDate).format("DD MMM YYYY") : date != null ? date : null)
//           setdatepicker(false)
//         }}
//         onCancel={() => setdatepicker(false)}
//       />

//       <CustomHeader 
//         title="Edit Tracker" 
//         menu={false} 
//         back={true} 
//         backscreen="Tracker" 
//         navigation={navigation}
//         rightMenu={
//           <TouchableOpacity onPress={() => Alert.alert("Fuel Tracker", "Do you want to delete this fuel tracker?", 
//             [{
//               text: 'Cancel',
//               style: 'cancel',
//             },{
//               text: 'OK', onPress: () => DeleteTracker()
//             },],
//             {cancelable: true}
//           )} style={{alignSelf: 'flex-end', right: 10}}>
//             <CustomIcon.MaterialIcons name="delete" size={25} color="#fff" />
//           </TouchableOpacity>
//         }
//       />

//       <Content>
//       <View style={{marginTop: 20, padding: 0}}>

//         <CustomForm 
//           items={
//             [
//               {
//                 name: "Date",
//                 value: date,
//                 disabled: true,
//                 onClick: () => setdatepicker(true),
//                 onChangeText: (val) => setdate(val)
//               },
//               {
//                 name: "Fuel Type",
//                 value: fueltype,
//                 disabled: true,
//                 onClick: () => navigation.navigation.navigate("AddFuelType", {get: (val) => setfueltype(val)})
//               },
//               {
//                 kb: "numeric",
//                 name: "Distance Travelled",
//                 icon: 'information-circle',
//                 value: distance,
//                 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,
//                 onFocus: () => liters ? setliters(liters.includes(" km") ? liters.replace(" km", "") : liters) : null,
//                 onBlur: () => liters ? setliters(liters +  " L") : null,
//                 onChangeText: (val) => setliters(val)
//               }
//             ]} 
//         />

//       </View>

//         <TouchableOpacity 
//           onPress={Update} 
//           style={{marginTop: '80%', 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>

//       </Content>

//       {/* <View style={{marginTop: 20, padding: 15}}>
      
//         <DateInput 
//           focus={isFocused(1)}
//           value={date}
//           onPress={() => {
//             setActiveInput(1)
//             setfocus(true)
//             setdatepicker(true)
//           }}
//         />

//         <FuelTypeInput 
//           focus={isFocused(2)} 
//           value={fueltype} 
//           onPress={() => navigation.navigation.navigate("AddFuelType")} 
//         />

//         <DistanceTravelledInput 
//           focus={isFocused(3)}
//           value={distance}
//           onFocus={() => {
//             setActiveInput(3)
//             setfocus(true)
//             distance ? setdistance(distance.includes(" km") ? distance.replace(" km", "") : distance) : null
//           }}
//           onBlur={() => distance ? setdistance(distance +  " km") : null }
//           onShowInfo={() => {
//             setinfodialog(true)
//           }}
//           onChangeText={(value) => {
//             setdistance(value)
//           }}
//         />

//         <LitersFueledInput 
//           focus={isFocused(4)}
//           value={liters}
//           onFocus={() => {
//             setActiveInput(4)
//             setfocus(true)
//           }} 
//           onChangeText={(value) => {
//             setliters(value)
//           }}
//         />

//         <TouchableOpacity 
//           onPress={Update} 
//           style={{marginTop: '80%', 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> */}
    
//     </SafeAreaView>
//   );
// }