 // LIBRARIES
 import React, { Component } from 'react';
 import { Formik } from 'formik'
 import { Menu, Dropdown, Row, Col, Modal, Radio,DatePicker, notification, Button, Select, Input } from "antd"
 import { connect } from "react-redux"
 import { customAction } from "actions";
 import { locationDetailsSchema } from '../validationSchema'
 import AddUserManagementForm from '../components/stationForm'
 
 class AddStation extends Component {
   state= {
     updating: false,
     isGenerated: false,
     loading: false,
     latitude: '',
     longitude: '',
     urlMap: '',
     fuels: [],
   }
 
 
   handleSubmit = async (data, actions) => {
     console.log("Upon Submit", this.state.fuels)
     const { setErrors, setSubmitting } = actions;
     let { history } = this.props;
     let _self = this;
     const result = this.state.fuels.map(({ FuelId, price }) => ({FuelId, price}));
     let user = localStorage.getItem('user')
     let values = {
       'name': data.name,
       'location': data.location,
       'map_Url': data.map_URL,
       'lat': data.lat,
       'long':data.long,
       'contact_number': data.contact_number.toString(),
       'created_by': user,
       'BranchId': data.BranchId.toString(),
       'StationFuels': result,
       'code': data.code.toString()
     }
     
     let inv = false;
     this.state.fuels.map((value) => {
       if(value.price == 0 || value.price == 0.00 || value.price == "0.00" || value.price == "00.00" || value.id == undefined){          
         inv = true
       }
     })
     if(inv){
       notification.error({
         message: "Error",
         description: <div>
           <div>Invalid Price for Fuel.</div>
         </div> ,
         duration: 3,
       });
       return
     }
     this.props.customAction({
       type: "STATION_CREATE_REQUEST",
       payload: {
         values,
         setSubmitting,
         setErrors,
         history,
         _self
       }
     });
   }
 
   handleAddUser =()=> {
     this.form.submitForm()
   }
 
   getMapdata = (url, lat, long) => {
     // console.log(url, lat, long)
     this.setState({urlMap: url, latitude: lat, longitude: long})
   }
 
   getFuelData = (data) => {
     // console.log(data)
     this.setState({fuels: data})
   }
 
   render() {
     const { match, history, stationCreate } = this.props;
     let { isGenerated, loading } = this.state;
     let user = localStorage.getItem('user')
     return (
       <div>
         <Formik
           initialValues={{
             name: '',
             location: '',
             map_URL: this.state.urlMap,
             lat: this.state.latitude,
             long: this.state.longitude,
             contact_number: '',
             BranchId: '',
             StationFuels: [],
             created_by: user,
             code: ''
           }}
           ref={node => (this.form = node)}
           enableReinitialize={true}
           validationSchema={locationDetailsSchema}
           onSubmit={this.handleSubmit }
           render = {(props)=>
             <AddUserManagementForm
               {...props}
               fuelId={this.getFuelData}
               title='Add Station'
               history={this.props.history}
               loading={stationCreate.createRequestPending || loading}
               mapData={this.getMapdata}
               isGenerated={isGenerated}
             />
           }
         />
       </div>
     );
   }
 }
 
 AddStation = connect(
   state => ({
     //userInfo: state
     stationCreate: state.stationCreate,
   }),
   { customAction }
 )(AddStation);
 
 export default AddStation;