dynamic_form_multi-city

/* eslint-disable jsx-a11y/label-has-associated-control */
/* eslint-disable jsx-a11y/control-has-associated-label */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import propTypes from 'prop-types';
import LoadingButton from './templates/Button';
import RadioInput from './templates/RadioInput';
import createTripFields from '../utils/createTripFields';
import {
  fetchCreateTripData,
  createTrip,
} from '../store/actions/createTripActions';
// import setAuthenticate from '../store/actions/authenticateAction';

export class CreateRequest extends Component {
  constructor(props) {
    super(props);

    this.state = {
      allTrips: [
        {
          tripType: 'return',
          travelDate: new Date().toISOString().split('T')[0],
          returnDate: new Date().toISOString().split('T')[0],
          leavingFrom: null,
          goingTo: null,
          hotel: null,
          rooms: null,
          reason: null,
          loadingError: null,
        },
      ],
    };
  }

  async componentDidMount() {
    const { props } = this;
    try {
      await props.fetchCreateTripData();
    } catch (error) {
      this.setState({
        loadingError: error,
      });
    }
  }

  createUI() {
    const { createTripData } = this.props;
    const { tripCreated } = createTripData;
    if (tripCreated === true) {
      return <Redirect to='/trip-request' />;
    }
    const {
      travelDate,
      returnDate,
      leavingFrom,
      goingTo,
      hotel,
      rooms,
      reason,
      tripType,
      loadingError,
    } = this.state;

    // const { loadingData } = this.props;
    // const { buttonLoading } = loadingData;

    let allLocationOptions,
      locationsWithHotelsOptions,
      hotelOptions,
      roomOptions,
      hotelsArray;

    if (createTripData.data !== null) {
      allLocationOptions = createTripData.data.allLocations.data.map(
        location => (
          <option value={location.id} key={location.id}>
            {location.city.toUpperCase()}
          </option>
        ),
      );

      const allLocationsWithHotels =
        createTripData.data.locationsWithHotels.data;

      locationsWithHotelsOptions = allLocationsWithHotels.map(location => (
        <option value={location.id} key={location.id}>
          {location.city.toUpperCase()}
        </option>
      ));

      if (goingTo !== null) {
        hotelsArray = allLocationsWithHotels.find(
          ({ id }) => id === parseInt(goingTo, 10),
        ).hotels;
        hotelOptions = hotelsArray.map(hotelOption => (
          <option value={hotelOption.id} key={hotelOption.id}>
            {hotelOption.name.toUpperCase()}
          </option>
        ));
      }

      if (hotel !== null) {
        const roomsInHotel = hotelsArray.find(
          ({ id }) => id === parseInt(hotel, 10),
        );
        roomOptions = roomsInHotel.rooms.map(roomOpt => (
          <option value={roomOpt.id} key={roomOpt.id}>
            {roomOpt.name.toUpperCase()}
          </option>
        ));
      }
    }
    return this.state.allTrips.map((el, i) => (
      <div key={i}>
        <div>{loadingError}</div>
        <div className='center-trip-radio-buttons'>
          {createTripFields.map(({ id, name, value, labelText }) => (
            <RadioInput
              key={id}
              name={name}
              value={value}
              labelText={labelText}
              checked={tripType === { value }}
              onChange={event => this.handleChange(event)}
            />
          ))}
        </div>

        <div className='form-group trips-date-divs'>
          <div className='dateDivs'>
            <label htmlFor='travelDate'>travel date</label>
            <input
              type='date'
              name='travelDate'
              defaultValue={travelDate}
              className='createTripInputs'
              onChange={event => this.handleChange(event)}
            />
          </div>
          <span />
          <div className='dateDivs'>
            <label htmlFor='returnDate'>return date</label>
            <input
              type='date'
              name='returnDate'
              defaultValue={returnDate}
              className='createTripInputs'
              onChange={event => this.handleChange(event)}
            />
          </div>
        </div>

        <div className='form-group trips-date-divs'>
          <div className='dateDivs'>
            <label htmlFor='leavingFrom'>
              LEAVING FROM
              <select
                onChange={event => this.handleChange(event)}
                className='form-control createTripInputs'
                name='leavingFrom'
              >
                <optgroup>
                  <option value=''>Choose</option>
                  <option defaultValue={leavingFrom} />
                  {allLocationOptions}
                </optgroup>
              </select>
            </label>
          </div>
          <span />
          <div className='dateDivs'>
            <label htmlFor='goingTo'>
              GOING TO
              <select
                onChange={event => this.handleChange(event)}
                className='form-control createTripInputs'
                name='goingTo'
              >
                <optgroup>
                  <option value=''>Choose</option>
                  <option defaultValue={goingTo} />
                  {locationsWithHotelsOptions}
                </optgroup>
              </select>
            </label>
          </div>
        </div>

        <div className='form-group accomodationDiv'>
          <div>
            <select
              onChange={event => this.handleChange(event)}
              className='form-control createTripInputs'
              name='hotel'
            >
              <optgroup>
                <option value=''>Select hotel</option>
                <option defaultValue={hotel} />
                {hotelOptions}
              </optgroup>
            </select>
          </div>
          <span />
          <div>
            <select
              onChange={event => this.handleChange(event)}
              className='form-control createTripInputs'
              name='rooms'
            >
              <optgroup>
                <option value=''>Select room</option>
                <option defaultValue={rooms} />
                {roomOptions}
              </optgroup>
            </select>
          </div>
        </div>

        <div className='form-group tripReason'>
          <label htmlFor='reasonForTrip'>REASON FOR THE TRIP</label>
          <textarea
            placeholder='Type here'
            name='reason'
            defaultValue={reason}
            onChange={event => this.handleChange(event)}
          />
        </div>
        <input
          type='button'
          value='remove'
          onClick={this.removeClick.bind(this, i)}
        />
      </div>
    ));
    // ));
  }

  handleChange(e) {
    const { name, value } = e.target;
    this.setState({
      [name]: value,
    });
  }

  addClick() {
    this.setState(prevState => ({ allTrips: [...prevState.allTrips, ''] }));
  }

  removeClick(i) {
    const allTrips = [...this.state.allTrips];
    allTrips.splice(i, 1);
    this.setState({ allTrips });
  }

  handleFormSubmit(formSubmitEvent) {
    const roomsArray = [];
    formSubmitEvent.preventDefault();
    const {
      tripType,
      leavingFrom,
      goingTo,
      travelDate,
      returnDate,
      hotel,
      rooms,
      reason,
    } = this.state;

    const { props } = this;
    let endpoint;
    let userRequest = {
      type: tripType,
      leavingFrom: parseInt(leavingFrom, 10),
      goingTo: parseInt(goingTo, 10),
      travelDate,
      reason,
    };
    if (hotel !== null && rooms !== null) {
      roomsArray.push(rooms);
      userRequest = {
        ...userRequest,
        hotelId: parseInt(hotel, 10),
        rooms: roomsArray,
      };
    }
    if (tripType === 'return') {
      userRequest = {
        ...userRequest,
        returnDate,
      };
      endpoint = '/trips/return';
      props.createTrip(userRequest, endpoint);
    } else {
      endpoint = '/trips/oneway';
      props.createTrip(userRequest, endpoint);
    }
  }

  render() {
    return (
      <div className='createTripContainer'>
        <form
          className='createTripForm'
          onSubmit={event => this.handleFormSubmit(event)}
        >
          {this.createUI()}
          <div className='form-group createTripBtn'>
            <input
              type='button'
              value='add more'
              onClick={this.addClick.bind(this)}
            />
            <LoadingButton
              data-test='submitInput'
              classNames='btn btn-success btn-trips'
              value='SUBMIT REQUEST'
              // buttonLoading={buttonLoading}
            />
          </div>
        </form>
      </div>
    );
  }
}

CreateRequest.propTypes = {
  fetchCreateTripData: propTypes.func,
  createTripData: propTypes.object,
  createTrip: propTypes.func,
  // loadingData: propTypes.objectOf(propTypes.any),
};

CreateRequest.defaultProps = {
  fetchCreateTripData: null,
  createTripData: null,
  createTrip: null,
  // loadingData: null,
};

export const mapStateToProps = state => ({
  loadingData: state.loadingState,
  createTripData: state.createTripState,
});

const mapDispatchToProps = {
  fetchCreateTripData,
  createTrip,
};

export default connect(mapStateToProps, mapDispatchToProps)(CreateRequest);