import React from "react";
import ForgotPassword from "../Login/ForgotPassword";
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";
class LoginForm extends React.Component {
  state = {
    fields: {},
    errors: {}
  };

  handleChange = e => {
    let fields = this.state.fields;
    fields[e.target.name] = e.target.value;
    this.setState({
      fields
    });
  };

  submituserRegistrationForm = e => {
    e.preventDefault();
    if (this.validateForm()) {
      let fields = {};

      fields["emailid"] = "";

      fields["password"] = "";
      this.setState({ fields: fields });
      alert("Form submitted");
    }
  };

  validateForm() {
    let fields = this.state.fields;
    let errors = {};
    let formIsValid = true;

    if (!fields["emailid"]) {
      formIsValid = false;
      errors["emailid"] = "*Please enter your email-ID.";
    }

    if (typeof fields["emailid"] !== "undefined") {
      //regular expression for email validation
      var pattern = new RegExp(
        /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i
      );
      if (!pattern.test(fields["emailid"])) {
        formIsValid = false;
        errors["emailid"] = "*Please enter valid email-ID.";
      }
    }

    if (!fields["password"]) {
      formIsValid = false;
      errors["password"] = "*Please enter your password.";
    }

    if (typeof fields["password"] !== "undefined") {
      if (!fields["password"].match(/^.*(?=.{8,})/)) {
        formIsValid = false;
        errors["password"] = "*Please enter secure and strong password.";
      }
    }

    this.setState({
      errors: errors
    });
    return formIsValid;
  }

  render() {
    return (
      <React.Fragment>
        <header className="header">
          <h1 className="site-title text-center">
            <img
              alt="myhobnob"
              src={require(`./../../assets/images/hobnoblogo.png`)}
            />
          </h1>
        </header>
        <div className="container">
          {/*  <div className="row">
             <div className="col col-12 u-text-center u-marginbottom-10">
              <a href="/pt"><img className="logo-login" src={require(`./../../assets/images/hobnoblogo.png`)} alt="Logo icon catharsis" /></a>
            </div> 
          </div>*/}
          <div className="row" id="login">
            <div className="col col-md-6 box-login col-push-3">
              <div className="fontweight-semibold u-text-center fontsize-large u-marginbottom-30 text-center">
                Login
              </div>
              <div className="login-fb">
                <a className="btn btn-medium btn-fb" href="#">
                  <font style={{ "verticalAlign ": " inherit " }}>
                    <font style={{ "verticalAlign ": " inherit " }}>
                      Sign in with Facebook
                    </font>
                  </font>
                </a>
              </div>
              <div className="separator">
                <div className="text or">
                  <font style={{ "verticalAlign ": " inherit " }}>
                    <font style={{ "verticalAlign ": " inherit " }}>or</font>
                  </font>
                </div>
              </div>
              <div className="form">
                <form
                  method="post"
                  name="userRegistrationForm"
                  onSubmit={this.submituserRegistrationForm}
                  className="simple_form new_user"
                  id="new_user"
                >
                  <input name="utf8" type="hidden" value="✓" />
                  <input type="hidden" name="authenticity_token" value="" />
                  <div className="input email optional user_email">
                    <label className="field-label">
                      <span
                        className="translation_missing"
                        title="translation missing: pt.devise.sessions.new.email"
                      >
                        Email
                      </span>
                    </label>
                    <input
                      type="text"
                      name="emailid"
                      value={this.state.fields.emailid}
                      onChange={this.handleChange}
                    />
                    <div className="errorMsg">{this.state.errors.emailid}</div>
                  </div>

                  <BrowserRouter>
                    <Switch>
                      <Route
                        path="/forgotpassword"
                        component={ForgotPassword}
                        exact
                      /> I forgot my password
                      <Link
                        to="/forgotpassword"
                        className="fontsize-smallest link-hidden fontcolor-secondary u-right"
                        id="forgot_password"
                      >
                        I forgot my password
                      </Link>
                    </Switch>
                  </BrowserRouter>
                  <div className="input password optional user_password">
                    <label className="field-label">
                      <font style={{ "verticalAlign ": " inherit " }}>
                        <font style={{ "verticalAlign ": " inherit " }}>
                          password
                        </font>
                      </font>
                    </label>
                    <input
                      className="password optional input text-field input text-field"
                      type="password"
                      name="password"
                      id="user_password"
                      value={this.state.fields.password}
                      onChange={this.handleChange}
                    />
                    <div className="errorMsg">{this.state.errors.password}</div>
                  </div>
                  {/* <div className="u-marginbottom-20">
                    <input name="user[remember_me]" type="hidden" value="0" />
                    <input className="boolean optional input text-field checkbox-fix" type="checkbox" value="1" checked="checked" name="user[remember_me]" id="user_remember_me" />
                    <label className="form-label fontsize-smallest">
                      <font style={{ "verticalAlign ": " inherit " }}>
                        <font style={{ "verticalAlign ": " inherit " }}>Stay connected</font>
                      </font>
                    </label>
                  </div> */}
                  <div className="row">
                    <div className=" col-md-6 ">
                      <input
                        type="submit"
                        name="commit"
                        value="Login"
                        className="btn btn btn-larger"
                      />
                    </div>
                    <div className=" col-md-6 ">
                      <div className="devise-opt">
                        <div className="lineheight-tight fontsize-small">
                          <div className="fontcolor-secondary">
                            <font style={{ "verticalAlign ": " inherit " }}>
                              <font style={{ "verticalAlign ": " inherit " }}>
                                No account yet?
                              </font>
                            </font>
                          </div>
                          <a
                            className="alt-link fontweight-semibold"
                            id="signup"
                            href="/pt/sign_up"
                          >
                            <font style={{ "verticalAlign ": " inherit " }}>
                              <font style={{ "verticalAlign ": " inherit " }}>
                                Register
                              </font>
                            </font>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default LoginForm;