import React from "react";
import { saveContactRequest } from "../lib/api";

export default class ContactModal extends React.Component {
  onContactCloseClick(e) {
    e.preventDefault();

    this.props.dispatch({
      type: "CLOSE_CONTACT"
    });
  }

  onSubmit(e) {
    e.preventDefault();
    const { name, email, message, phone, alert } = this.props.contact;

    if (!name || !email) {
      this.props.dispatch({
        type: "INVALID_CONTACT"
      });
    } else {
      this.props.dispatch({
        type: "SUBMIT_CONTACT_START"
      });

      saveContactRequest(this.props.listingId, {
        name,
        email,
        phone,
        message,
        alert
      })
        .then(l => l.text())
        .then(res => {
          this.props.dispatch({
            type: "SUBMIT_CONTACT_END"
          });
        })
        .catch(e => {
          // TODO: should we have a global view for rendering errors
          console.error(e);
        });
    }
  }

  onFieldChange(field, e) {
    this.props.dispatch({
      type: "UPDATE_CONTACT_INFO",
      action: {
        field,
        value: e.target.value
      }
    });
  }

  onAlertToggle(e) {
    const alert = this.props.contact.alert;
    this.props.dispatch({
      type: "UPDATE_CONTACT_INFO",
      action: {
        field: "alert",
        value: !alert
      }
    });
  }

  render() {
    const {
      message,
      email,
      phone,
      name,
      alert: doAlert,
      nameInvalid,
      emailInvalid,
      sending
    } = this.props.contact;

    const nameValidationClass = nameInvalid ? "validation-failed" : "";
    const emailValidationClass = emailInvalid ? "validation-failed" : "";

    return (
      <div className="modal contact-form">
        <div>
          <a
            href="#close"
            title="Zatvori"
            className="close"
            onClick={this.onContactCloseClick.bind(this)}
          >
            <i className="fa fa-times" aria-hidden="true" />
          </a>
          <form onSubmit={this.onSubmit.bind(this)}>
            <h3>Kontaktirajte prodavca</h3>
            <div className="contact-form-name">
              <input
                value={name}
                className={nameValidationClass}
                onChange={this.onFieldChange.bind(this, "name")}
                placeholder="Ime i prezime"
                type="text"
              />
            </div>
            <div className="contact-form-email-phone">
              <input
                value={email}
                className={emailValidationClass}
                onChange={this.onFieldChange.bind(this, "email")}
                placeholder="Email adresa"
                type="email"
                name="email"
              />
              <input
                value={phone}
                onChange={this.onFieldChange.bind(this, "phone")}
                placeholder="Telefon (opcionalno)"
                type="text"
              />
            </div>
            <div className="contact-form-message">
              <textarea
                onChange={this.onFieldChange.bind(this, "message")}
                value={message}
              />
            </div>
            <div className="contact-form-alert noselect">
              <label>
                <input
                  type="checkbox"
                  onChange={this.onAlertToggle.bind(this)}
                  checked={doAlert}
                />
                Javi mi kada se objavi sličan oglas
              </label>
            </div>
            <div className="contact-form-footer">
              <button disabled={sending}>Pošalji poruku</button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}
