// LIBRARIES
import React, {Component} from 'react';
import { Row, TreeSelect, Col } from 'antd';
import { Form, Field } from 'formik';
import { connect } from 'react-redux';
import HeaderForm from "components/Forms/HeaderForm"
// COMPONENTS
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
import { Inputs, Select, InputTextArea, MultiSelectOptions } from 'components/Forms';
// import { MultiSelectOptions } from 'components/Forms/index';

// HELPER FUNCTIONS

const { TreeNode } = TreeSelect;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 18 },
  },
};

const center = {
  lat: 16.1505,
  lng: 119.9856
};
const containerStyle = {
  width: 'inherit',
  height: '300px',
  marginBottom: '20px'
};

class AddFuel
 extends Component {
  state = {
    value: [],
    map: null
  };
  

 onChange = (e) => {
    this.setState({value: e})
    console.log(e)
  }

  handleSubmit = async (values, actions) => {
 
    console.log(values, actions)
  }

  handleChange = (data) => {
    console.log(data)
    this.setState({value: data})
  }  
 render(){
    console.log(this.props)
    const { handleSubmit, history} = this.props
  return (
    <Form noValidate>
      <HeaderForm 
        // isInsideForm
        loading={this.state.loading}
        disabled={false}
        title={this.props.title}
        action={handleSubmit}
        actionBtnName="Save"
        withCancelConfirm={{ message: 'Are you sure you want to discard changes?'}}
        cancel={()=> { window.location.replace("/fuels")}}
        cancelBtnName="Cancel"
      />
      <Field
        name="name"
        type="text"
        icon=""
        layout={formItemLayout}
        label="Fuel Name"
        placeholder="Enter"
        component={Inputs}
     />
    </Form>
  )};
};


AddFuel = connect(
  state => ({}),
)(AddFuel);


export default AddFuel;