import React, { Component } from "react"
import _omit from "lodash/omit"
import { AvForm, AvField, AvInput } from "availity-reactstrap-validation"
import axios from "axios"

class LoginForm extends Component {
  constructor(props) {
    super(props)
    this.state = {
      username: "",
      password: ""
    }
    ;["handleChange", "handleValidSubmit"].forEach(v => {
      this[v] = this[v].bind(this)
    })
  }

  handleValidSubmit(event, values) {
    var data = [
      {
        username: this.state.username,
        password: this.state.password
      }
    ]
    this.setState(_omit(values, "loginSubmit"))
    axios({
      method: "post",
      url: "http://wp-cart.warungpintar.co:5001/login",
      headers: {
        "Content-Type": "application/json",
        key: "TUMYmAEXi22OkOnHx8fzoa3F3nR5traDRdcuBy31",
        "Access-Control-Allow-Origin": true
      },
      data: JSON.stringify(data)
    })
      .then(response => {
        if (response.status === "error") {
          this.setState({
            validataionMessage: response.message
          })
          return
        }
        this.setState({
          data: response
        })
      })
      .catch(error => {
        console.log(error)
        console.log(error.message)
      })
  }

  handleChange(event) {
    const { target } = event
    const value = target.type === "checkbox" ? target.checked : target.value
    const { name } = target

    this.setState({
      [name]: value
    })
  }

  render() {
    return (
      <AvForm id="AvLoginForm" onValidSubmit={this.handleValidSubmit}>
        <div className="form-group form-group-with-icon">
          <AvField
            name="username"
            type="text"
            className="form-control"
            placeholder="Username"
            value={this.state.username}
            onChange={this.handleChange}
            validate={{
              required: { errorMessage: "Field ini harus diisi." }
            }}
          />
          <i className="icon ion-ios-person-outline" />
        </div>

        <div className="form-group form-group-with-icon">
          <AvField
            name="password"
            type="password"
            className="form-control"
            placeholder="Password"
            value={this.state.password}
            onChange={this.handleChange}
            validate={{
              required: { errorMessage: "Password harus di isi." }
            }}
          />
          <i className="icon ion-ios-unlocked-outline" />
        </div>

        <AvInput
          type="submit"
          name="loginSubmit"
          className="btn btn-block btn-outline-primary btn-outline-submit mt-4"
          value="MASUK"
        />
      </AvForm>
    )
  }
}

export default LoginForm