 // LIBRARIES
 import React, { Component } from 'react';
 import { Menu, Dropdown, Row, Col, Input, Button, Modal, message, notification } from "antd"
 import { Formik } from 'formik'
import queryString from 'query-string';

 import { fuelSchema } from '../../components/fuelSchema'
 import AddUserManagementForm from '../../components/fuelsForm'
 import {API_UNI_OIL, API_PUT_FUEL} from 'utils/StationApi'
  class EditFuel extends Component {
    state= {
      mounted: false,
      isGenerated: false,
      loading: false,
      name: '',
    }

    async componentDidMount(){
      // let id = window.location.pathname.split('/')[3]    '
      
    const { match } = this.props;

    try {
      let response = await API_UNI_OIL.get(`fuels/${match.params.id}`) 
      this.setState({
        name: response.data.name,
        mounted: true
      })
    } catch ({response: error}) {
      notification.error({ 
        message: "Error", 
        description: <div>
          <div>Something went wrong loading data.</div>
        - { error && error.data && error.data.message }
        </div> , 
        duration: 3, 
      });
      if(error.status == 404) {
        if(this.props.location.pathname)
          this.props.history.push(`${this.props.location.pathname}/404`); return
      }
      this.setState({ mounted: false })
    }
    }
 
    handleSubmit = async (values, actions) => {
      const { match } = this.props;
      
      const { setErrors } = actions;
      let { history } = this.props;
      let params  = { ...values }
      this.setState({ loading: true });
      
      try {
        const response = await API_PUT_FUEL(`fuels/${match.params.id}`,params);
        console.log(params)
        if(response) {
          message.success('Fuel updated successfully.') && message.success("Don't forget to sync updated fuel to system parameters!");
          this.setState({ loading: false });
          history.push({ pathname: '/fuels' });
        }
       console.log(response)
      } catch (error) {
        // if (error.status === 422) {
        //   apiFormValidation({ data: error.data.data, setErrors });
        // }
        console.log(error)
        notification.error({ 
          message: 'Something went wrong updating record', 
          description: <div>
            { error && error.data && error.data.data && error.data.data.fee_code 
                && (<h3>{error.data.data.fee_code[0]} </h3>) }
          </div>
        });
        this.setState({ loading: false });
      }
    }
 
 
    render() {
      const { match, history } = this.props;
      let { isGenerated } = this.state;
      let user = localStorage.getItem('user')
      return (
        <div>
          <Formik
            initialValues={{
              name: this.state.name,
            }}
            ref={node => (this.form = node)}
            enableReinitialize={true}
            validationSchema={fuelSchema}
            onSubmit={this.handleSubmit }
            render = {(props)=> 
              <AddUserManagementForm 
                {...props}
                title='Edit Fuel'
                // history={this.props.history}
                // loading={userManagement.createRequestPending || loading}
                // generatePassword={this.generatePassword}
                isGenerated={isGenerated}
                // copyActionHandler={this.copyActionHandler}
              />
            }
          />
        </div>
      );
    }
  }
  
  export default EditFuel;