import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

import classnames from 'classnames/bind'
import styles from './styles.scss'
const cx = classnames.bind(styles)

import { NavLink } from 'react-router-dom'
import {checkLogin, testRequest, searchUserbyId} from 'api'

export class Login extends Component {

  state = {
    Username: '',
    Password: '',
    isLogin: false
  }

  static propTypes = {
    Id: PropTypes.number.isRequired,
    FirstName: PropTypes.string.isRequired,
    LastName: PropTypes.string.isRequired,
    Email: PropTypes.string.isRequired,
    Phone: PropTypes.string.isRequired,
    mapStateToProps: PropTypes.func.isRequired
  }

  static defaultProps = {
    Id: 1,
    FirstName: 'Иван',
    LastName: 'Иванов',
    Email: '123@456.789',
    Phone: '89275658358'
  }

  onChange = (key, value) => {
    this.setState({
      [key]: value
    });
  }

onLogin = (Username, Password) => {
  checkLogin(Username, Password)
  .then(result => {
    console.log(result);
    console.log('Раскомментить и убрать лог(onLogin)');
    //onChange("isLogin", result)
  })
}

testbtnRequest = (Id) => {
  searchUserbyId(Id)
  .then(result => {
    console.log(result);
  })
}


  render() {
    return (
      <div>
      <form id="login">
        <h1>Форма входа</h1>
        <fieldset id="inputs">
          <input id="username" type="text" placeholder="Email" autoFocus required onChange={(event) => {this.onChange("Username", event.target.value)}}/>
          <input id="password" type="password" placeholder="Пароль" required onChange={(event) => {this.onChange("Password", event.target.value)}}/>
        </fieldset>
        <fieldset id="actions">
          <button id="submit" onClick={(e) => {
            e.preventDefault();
            this.onLogin(this.state.Username, this.state.Password)
          }}>ВОЙТИ</button>
          <a href="" onClick={(e) => {
            e.preventDefault();
            this.testbtnRequest(2)
          }}>Забыли пароль?</a>
          <NavLink exact activeClassName = 'active' to='/registration'>
            Регистрация
          </NavLink>
        </fieldset>
      </form>
      <div>{ this.props.loginParams }</div>
      </div>
  )
  }
}

mapStateToProps = (state) => {
  return {
    loginParams: state
  }
}

export default connect(mapStateToProps)(Login)