// 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 { Input, Select, InputTextArea, MultiSelectOptions, DatePicker, TimePickerForm } from 'components/Forms';
// import { MultiSelectOptions } from 'components/Forms/index';
import ScheduledEdit from './scheduledEdit'

// 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 FormLocation extends Component {
  state = {
    value: [
        {value: 'autoGas', label: "Auto Gas"},
        { value: 'gasoline95', label: "Auto Gas"}
],
    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.title)
    const { handleSubmit } = 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={()=> this.handleSubmit}
        cancelBtnName="Cancel"
      />
      {/* <Row justify='center'> */}
      <LoadScript googleMapsApiKey="">
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={center}
          zoom={20}
          // onLoad={onLoad}
          // onUnmount={onUnmount}
        >
          <Marker position={center} draggable={true} onPositionChanged={(e)=>console.log(e)}/>
        </GoogleMap>
        </LoadScript>
      {/* </Row> */}
      <Field
        name="mapURL"
        type="text"
        icon=""
        layout={formItemLayout}
        label="Map URL"
        // disabled={true}
        placeholder=""
        component={InputTextArea}
      />
      <Field
        name="lat"
        type="date-time"
        icon=""
        layout={formItemLayout}
        label="Latitude"
        placeholder=""
        component={DatePicker}
      />
      <Field
        name="long"
        type="date-time"
        icon=""
        layout={formItemLayout}
        label="Longitude"
        placeholder=""
        component={TimePickerForm}
      />
      <Field
        // isCopyUsername
        name="statioCode"
        type="text"
        icon=""
        layout={formItemLayout}
        label="Station Name"
        placeholder="Station Name"
        component={Input}
      />
      <Field
        // isCopyUsername
        name="stationName"
        type="text"
        icon=""
        layout={formItemLayout}
        label="Station Name"
        placeholder="Station Name"
        component={Input}
      />
      <Field
        name="stationLocation"
        type="text"
        icon=""
        layout={formItemLayout}
        label="Station Location"
        placeholder="Complete Station Information"
        component={Input}
      />
      <Field
        name="number"
        type="number"
        icon=""
        layout={formItemLayout}
        label="Contact Number"
        placeholder="Contact Number"
        component={Input}
      />
      <Field
        name="branch"
        type="text"
        icon=""
        layout={formItemLayout}
        label="Branch"
        placeholder="Select"
        multiple={true}
        optionsList={[
          {value: 'sample0', id: 1, label:'label0'},
          {value: 'sample1', id: 2, label:'label1'},
          {value: 'sample2', id: 3, label:'label2'},
          {value: 'sample3', id: 4, label:'label3'},
        ]}
        component={Select}
      />
      {
        this.state.value.length == 0 ? '' :
          this.state.value.map((val, index)=>{
            // console.log(val)
            let label = ''
            switch(val.value){
              case 'autoGas' :
                label = 'Auto Gas'
              break;
              case 'gasoline95' :
                label = 'Euro 5 Gasoline 95'
                break;
              case 'gasoline91' :
                label = 'Euro 5 Gasoline 91'
                break;
              case 'gasoline97' :
                label = 'Euro 5 Gasoline 97'
                break;
              case 'diesel' :
                label = 'Euro 5 Diesel'
              break;
            }
          return(
            <Field
              name={val}
              type="number"
              icon=""
              layout={formItemLayout}
              label={label}
              placeholder={label}
              component={ScheduledEdit}
            />
          )
        })
      }
    </Form>
  )};
};


FormLocation = connect(
  state => ({

  }),
)(FormLocation);


export default FormLocation;

