import React, { Component } from "react";
import { Link } from "react-router-dom";
import Spinner from "../components/spinner";
import Icon from "../components/icon";
import { ICONS } from "../components/constants";
import update from 'immutability-helper';
import { bookingStatus } from "../components/booking/booking_status";
import { paymentMethod } from "../components/booking/payment_method";
import { EPERM } from "constants";

export default class Booking extends Component {
  constructor(props) {
    super(props);
    this.state = {
      passengerNumber: null,
      booking: {
        id: "",
        number: "",
        date: "",
        bookingStatus: "OPCIJA",
        paymentMethod: "MODELA1",
        tripID: 1,
        passengers: [
          {
            id: "",
            holder: {
              email: "",
              address: "",
              mobile: ""
            },
            name: "",
            surname: "",
            passport: "",
            idCard: ""
          }
        ]
      },
      extras: "",
      totalPrice: "",
      trip: null,
      id: this.props.match.params.id
    };
    this.handleChange = this.handleChange.bind(this);
    this.addPassenger = this.addPassenger.bind(this);
    this.removePassenger = this.removePassenger.bind(this);
  }

  checkArrayLength(){
    console.log(this.state.booking.passengers.length)
    let arrayLength = this.state.booking.passengers.length;
    this.setState({
      passengerNumber: arrayLength
    })
  }

  handleChange(i, e) {
    let passengers = [...this.state.booking.passengers];
    passengers[i][e.target.name] = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
    let passengersHolders = this.state.booking.passengers[0].holder;
    passengersHolders[e.target.name] = e.target.value;
    this.setState({ passengers, passengersHolders }, () => console.log(this.state.booking.passengers));
  }

  addPassenger = e => {
    e.preventDefault();
    let passengersArray = [...this.state.booking.passengers];
    console.log(passengersArray);
    this.setState({
      passengers: [...passengersArray, {
        id: "",
        name: "",
        surname: "",
        passport: "",
        idCard: ""
      }]
    })
    this.checkArrayLength();
  }

  removePassenger(i) {
    let passengers = [...this.state.booking.passengers];
    passengers.splice(i, 1);
    this.setState({
      passengers,
      passengerNumber: this.state.passengerNumber - 1
    });
    this.checkArrayLength()
  }

  calculateTotal = () => {
    this.setState({
      totalPrice: totalPrice
    });
  };

  submitBooking() {
    const booking = this.state;
    fetch("/api/passenger/create", {
      method: "POST",
      body: JSON.stringify(booking),
      headers: {
        "Content-Type": "application/json"
      }
    }).then(res => console.log("RECT"));
  }

  componentDidMount() {
    fetch("/api/trips/get/" + this.state.id)
      .then(res => res.json())
      .then(trip =>
        this.setState(
          {
            trip
          },
          () => console.log("Trips fetched...", trip)
        )
      );
    this.checkArrayLength();
  }

  render() {
    const isEnabled = this.state.passengerNumber < 8;
    const isEnabledRemove = this.state.passengerNumber === 1;
    if (this.state.trip && this.state.booking.passengers) {
      return (
        <div className="container">
          <div className="row">
            <div className="col-md-8">
              <div className="row">
                <div className="col-md-12">
                  <div className="booking-from">
                    <form onSubmit={this.handleSubmit}>
                      <div className="booking-form__group">
                        <h1>Rezervacija</h1>

                        <h5>
                          Puno ime i prezime putnika kao što je prikazano u
                          putovnici
                        </h5>
                        <small style={{ display: "block", marginBottom: 10 }}>
                          * Maksimalni broj online rezervacija je 8
                        </small>
                        {this.state.booking.passengers.map((passenger, idx) => {
                          let passengerNameId = `passengerName-${idx}`,
                            passengerSurnameId = `age-${idx}`;
                          return (
                            <React.Fragment key={idx}>
                              <div className="form-row">
                                <div className="form-group col-md-6">
                                  <label className="has-float-label form-control-upper">
                                    <input
                                      name="name"
                                      value={this.state.booking.passengers.name}
                                      onChange={this.handleChange.bind(this, idx)}
                                      className="name form-control"
                                      placeholder="Ime"
                                      id={passengerNameId}
                                      data-id={idx}
                                    />
                                    <span>Ime</span>
                                  </label>
                                </div>
                                <div className="form-group col-md-5">
                                  <label className="has-float-label form-control-upper">
                                    <input
                                      name="surname"
                                      value={
                                        this.state.booking.passengers.surname
                                      }
                                      onChange={this.handleChange.bind(this, idx)}
                                      className="surname form-control"
                                      placeholder="Prezime"
                                      id={passengerSurnameId}
                                      data-id={idx}
                                    />
                                    <span>Prezime</span>
                                  </label>
                                </div>
                                <div className="form-group col-md-1">
                                  <button
                                    className="remove-passenger"
                                    disabled={isEnabledRemove}
                                    onClick={this.removePassenger}
                                    data-id={idx}
                                  >
                                    <Icon
                                      icon={ICONS.CIRCLEMINUS}
                                      color={"#e5223c"}
                                      size={24}
                                    />
                                  </button>
                                </div>
                              </div>
                              <div className="form-row">
                                <div className="form-group col-md-3">
                                  <label className="has-float-label">
                                    <input
                                      name="passport"
                                      value={
                                        this.state.booking.passengers.passport
                                      }
                                      onChange={this.handleChange.bind(this, idx)}
                                      className="form-control"
                                      placeholder="Putovnica"
                                      type="number"
                                      maxLength="9"
                                    />
                                    <span>Putovnica</span>
                                  </label>
                                </div>
                                <div className="form-group col-md-3">
                                  <label className="has-float-label">
                                    <input
                                      name="idCard"
                                      value={
                                        this.state.booking.passengers.idCard
                                      }
                                      onChange={this.handleChange.bind(this, idx)}
                                      className="form-control"
                                      placeholder="Osobna iskaznica"
                                      maxLength="9"
                                    />
                                    <span>Osobna iskaznica</span>
                                  </label>
                                </div>
                              </div>
                              <div className="form-row">
                                <div className="form-group col-md-12">
                                  <div className="form-check">
                                    <label className="form-check-label">
                                      <input
                                        className="form-check-input"
                                        type="checkbox"
                                        checked={this.state.insuranceCheck}
                                      />
                                      Polica putnog zdravstvenog osiguranja?{" "}
                                      {this.state.trip.insurance},00 kn
                                    </label>
                                  </div>
                                  <div
                                    className="form-check"
                                    style={{ marginBottom: 5 }}
                                  >
                                    <label className="form-check-label">
                                      <input
                                        className="form-check-input"
                                        type="checkbox"
                                        checked={this.state.insuranceExtraCheck}
                                      />
                                      Polica putnog putnog osiguranja od otkaza?{" "}
                                      {this.state.trip.insuranceExtra},00 kn
                                    </label>
                                  </div>
                                </div>
                              </div>
                            </React.Fragment>
                          );
                        })}
                        <button
                          className="btn"
                          disabled={!isEnabled}
                          onClick={this.addPassenger}
                        >
                          <Icon icon={ICONS.USERPLUS} size={16} /> Dodaj novog
                          putnika
                        </button>
                      </div>
                      <div className="booking-form__group">
                        <h4 className="booking-form__group-title">
                          Kontakt podaci nositelja rezervacije
                        </h4>
                        <div className="form-group">
                          <label className="has-float-label">
                            <input
                              name="email"
                              value={this.state.booking.passengers[0].holder.email}
                              onChange={this.handleChange.bind(this, 0)}
                              className="form-control"
                              placeholder="Email"
                            />
                            <span>Email</span>
                          </label>
                        </div>
                        <div className="form-group">
                          <label className="has-float-label">
                            <input
                              name="address"
                              value={this.state.booking.passengers[0].holder.address}
                              onChange={this.handleChange.bind(this, 0)}
                              className="form-control"
                              placeholder="Adresa"
                            />
                            <span>Adresa</span>
                          </label>
                        </div>
                        <div className="form-group">
                          <label className="has-float-label">
                            <input
                              name="mobile"
                              value={this.state.booking.passengers[0].holder.mobile}
                              onChange={this.handleChange.bind(this, 0)}
                              className="form-control"
                              placeholder="Mobitel"
                            />
                            <span>Mobitel</span>
                          </label>
                          <small>
                            Mobitel napišite u obliku +3850123456789
                          </small>
                        </div>
                      </div>

                      <div className="booking-form__group">
                        <h4 className="booking-form__group-title">
                          Model plaćanja
                        </h4>
                        <div className="form-group">
                          <select className="custom-select" required>
                            <option value="">Model plaćanja</option>
                            <option value="1">Model A1</option>
                            <option value="1">Model A2</option>
                            <option value="1">Model A3</option>
                            <option value="2">Model A4</option>
                            <option value="3">Model A5</option>
                          </select>
                          <div className="invalid-feedback">
                            Example invalid custom select feedback
                          </div>
                          <div className="option-feedback booking-form__options-description">
                            <h5>MODEL A1</h5>
                            <div>
                              <div>
                                Gotovinsko plaćanje u jednakim obrocima na žiro
                                račun ICHTIS TRAVEL agencije:
                              </div>
                              <div>IBAN: HR53 2402006 1100419357</div>
                              <div>
                                + POZIV NA BROJ: {this.state.trip.tripCode}
                              </div>
                              <div>
                                Za uplatu depozita popuniti uplatnicu na gore
                                navedeni žiro račun i iznos.
                              </div>
                              <div>
                                Uplatnice za preostale rate biti će otisnute i
                                dostavljene na adresu koju ste nam naveli u
                                obrascu.
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="booking-form__group">
                        <p>
                          Upoznat(a) sam i suglasn(a) s opisanim uvijetima
                          putovanja u privitku, odredbama ugovora i općim
                          uvjetima organizacije aranžmana, te ponudom osiguranja
                          opisanom u uvjetima korištenja i odredbama. *
                        </p>
                        <p>
                          Vaši osobni podaci bit će korišteni za obradu vaše
                          narudžbe, podršku vašem iskustvu na ovoj web stranici
                          i za druge svrhe opisane u našim pravilima
                          privatnosti.
                        </p>
                        <label className="form-check-label">
                          <input className="form-check-input" type="checkbox" />
                          Pročitao/la sam i slažem se s{" "}
                          <Link to="/opci-uvjeti">uvjetima korištenja</Link> i
                          odredbama web-stranice. *
                        </label>
                      </div>
                      {/* <input className="btn" type="submit" value="Submit" /> */}
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-md-4">
              <div className="booking-sidebar">
                <div className="booking-form__description">
                  <span>{this.state.trip.title}</span>
                  <span>Polazak: {this.state.trip.departureDate}</span>
                  <span>Dolazak: {this.state.trip.arrivalDate}</span>
                  <span>Trjanje: 8 dana</span>
                  <span>Odredište: {this.state.trip.destination}</span>
                </div>
                <span>
                  Cijena po osobi: {this.state.trip.price}
                  ,00 kn
                </span>
                <hr />
                <span>
                  Dodatne usluge
                  <span>Polica putnog osiguranja:</span>
                  <span>
                    {
                      (this.state.extras =
                        this.state.trip.insurance * this.state.passengerNumber)
                    }
                  </span>
                </span>
                <hr />
                <span>
                  <h5>Ukupno:</h5>{" "}
                  {
                    (this.state.totalPrice =
                      this.state.trip.price * this.state.passengerNumber)
                  }
                  ,00 kn{" "}
                </span>
                <input
                  className="btn"
                  style={{ width: "100%" }}
                  type="submit"
                  value="Rezerviraj"
                />
              </div>
            </div>
          </div>
        </div>
      );
    } else {
      return <Spinner />;
    }
  }
}