import React from "react"
import './login.css'
import { useLocation, useNavigate } from 'react-router-dom';

const Login = () => {
  state = {
    username: "",
    password: "",
  }

  const { setAuth } = useContext(AuthContext); // используем контекст для получения значений isAuthenticated и setAuth

  const navigate = useNavigate(); // используем хук useNavigate для навигации по маршрутам
  const location = useLocation(); // используем хук useLocation для получения текущего маршрута

  // получаем маршрут, на который нужно перенаправить пользователя после авторизации
  const from = location.state?.from?.pathname || '/';

  validateString = (text:string) => {
    return text ? text : false
  }

  return (
    <div>
      <div>
        <input
          type="text"
          name="username"
          placeholder="Username"
          onChange={(e) => this.setState({username: e.target.value})}
          onBlur={(e) => this.setState({username: e.target.value})}
        />
      </div>
      <div>
        <input
            type="text"
            name="password"
            placeholder="Password"
            onChange={(e) => this.setState({password: e.target.value})}
            onBlur={(e) => this.setState({password: e.target.value})}
            color="#FF0000"
        />
      </div>
      <div className="bold-text">
          Your username is: {this.state.username}
      </div>
      <div>
          {
              (() => {
                  const r: string | boolean = this.validateString(this.state.username);
                  if (r) {
                      return r
                  }
                  return "invalid";
              })()
          }
      </div>
      <div className="bold-text">
          Your password is: {this.state.password}
      </div>
      <div>
          {
              (() => {
                  const r: string | boolean = this.validateString(this.state.password);
                  if (r) {
                      return r
                  }
                  return "invalid";
              })()
          }
      </div>
      <button
          onClick={() =>
              this.validateString(this.state.username)
              &&
              this.validateString(this.state.password)
              ? false
              : alert("Please enter not blank username and password")
          }
      >
          <span>
              Login
          </span>
      </button>
    </div>
  )
}

export default Login;