 // 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 { branchSchema } from '../../components/branchSchema'
 import AddUserManagementForm from '../../components/branchesForm'
 import {API_UNI_OIL, API_PUT_BRANCH} from 'utils/StationApi'
  class CreateBranch extends Component {
    state= {
      mounted: false,
      isGenerated: false,
      loading: false,
      name: '',
      details: '',
      branchCode:'',
    }

    async componentDidMount(){
      // let id = window.location.pathname.split('/')[3]    '

    const { match } = this.props;

    try {
      let response = await API_UNI_OIL.get(`branches/${match.params.id}`)
      console.log('branches', response.data)
      this.setState({
        branchCode: response.data.code,
        name: response.data.name,
        details: response.data.details,
        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_BRANCH(`branches/${match.params.id}`,params);
        console.log(params)
        if(response) {
          message.success('Branch updated.') && message.success("Don't forget to sync updated branch to system parameters!");
          this.setState({ loading: false });
          history.push({ pathname: '/branches' });
        }
       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 the record!',
          description: <div>
            <h3>{error.data.message}</h3>
            {/* { error && error.data && error.data.data && error.data.data.fee_code
                && (<div>- {error.data.data.fee_code[0]} </div>) } */}
          </div>
        });
        this.setState({ loading: false });
      }
    }


    render() {
      const { match, history } = this.props;
      let { isGenerated } = this.state;
      let user = localStorage.getItem('user')
      return (
        <div>
          <Formik
            initialValues={{
              code: this.state.branchCode,
              name: this.state.name,
              details: this.state.details,
              modified_by: user,
            }}
            ref={node => (this.form = node)}
            enableReinitialize={true}
            validationSchema={branchSchema}
            onSubmit={this.handleSubmit }
            render = {(props)=>
              <AddUserManagementForm
                {...props}
                title='Edit Branch'
                // history={this.props.history}
                // loading={userManagement.createRequestPending || loading}
                // generatePassword={this.generatePassword}
                isGenerated={isGenerated}
                // copyActionHandler={this.copyActionHandler}
              />
            }
          />
        </div>
      );
    }
  }

  export default CreateBranch;