import React, { useState } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import {
  UserOutlined,
  LockOutlined,
  EyeOutlined,
  EyeInvisibleOutlined,
} from "@ant-design/icons";
import jwtDecode from "jwt-decode";

import { actionLogin } from "./actionLogin/actionLogin";
import { actionChatGroup } from "../myProfile/chatGroups/actionChatGroup/actionChatGroup";
import "./signIn.css";

const loginEye = () => {
  const password = document.getElementById("password");
  const notSee = document.querySelector(".not-see");
  const see = document.querySelector(".see");

  if (password.type === "password") {
    password.type = "text";
    see.style.display = "inline-block";
    notSee.style.display = "none";
  } else {
    password.type = "password";
    notSee.style.display = "inline-block";
    see.style.display = "none";
  }
};

const LoginForm = ({ onLogin, backError, state }) => {
  const [login, setLogin] = useState("");
  const [password, setPassword] = useState("");
  
  const way = (obj, resolverName, a) => {
    const stateObj = state[obj];
    for (var keys in stateObj) {
      for (var keyData in stateObj[keys]) {
        if (keyData === "data") {
          const allObj = stateObj[keys][keyData][resolverName];
          if (allObj) {
            var x = jwtDecode(allObj);
            localStorage.setItem("id", x.sub.id);
            localStorage.setItem("email", x.sub.email);
            localStorage.setItem("login", x.sub.login);
          } else {
            return (
              <div className="error">
                <p>Неверный логин или пароль, попробуйте заново.</p>
              </div>
            );
          }
        }
      }
    }
  };
// console.log(localStorage.getItem("id"));
  const buttonEnter = (e) => {
    if (e.key === "Enter") onLogin(login, password);
  };

  // const handleClick = () => history.push("/my_profile");

  return (
    <div className="login">
      <div className="login-form" onKeyPress={buttonEnter}>
        <div className="login-title">
          <h2>Войти в аккаунт</h2>
          <p>Пожалуйста, войдите в свой аккаунт</p>
        </div>

        <div className="login-icon icon">
          <UserOutlined />
          <input
            id="login"
            value={login}
            placeholder="Логин"
            type="text"
            onChange={(e) => setLogin(e.target.value)}
          />
        </div>

        <div className="password-icon icon">
          <LockOutlined />
          <input
            id="password"
            value={password}
            placeholder="Пароль"
            type="password"
            onChange={(e) => setPassword(e.target.value)}
          />
          <div className="not-see" onClick={loginEye}>
            <EyeInvisibleOutlined />
          </div>
          <div className="see" onClick={loginEye}>
            <EyeOutlined />
          </div>
        </div>

        {way("login", "getLogin")}

        <button
          className="login-button"
          onClick={() => onLogin(login, password)}
          disabled={!login || !password}
        >
          Войти
        </button>

        <div className="register-put-password">
          <Link to="/sign_up">Зарегестрироваться</Link>
          <Link to="/put_password">Забыли пароль?</Link>
        </div>
      </div>
    </div>
  );
};

// class LoginForm extends Component  {
//   constructor(props) {
//     super(props);
//     this.state = { login: "", password: "" };
//     // console.log(this.props);
//   }

//    way (obj, resolverName, a)  {
//     const stateObj = this.props.state[obj];
//     for (var keys in stateObj) {
//       for (var keyData in stateObj[keys]) {
//         if (keyData === "data") {
//           const allObj = stateObj[keys][keyData][resolverName];
//           if (allObj) {
//             var x = jwtDecode(allObj);
//             // return x.sub.email;
//             // console.log(x);
//           } else {
//             return (
//               <div className="error">
//                 <p>Неверный логин или пароль, попробуйте заново.</p>
//               </div>
//             );
//           }
//         }
//       }
//     }
//   };

//   way1 (obj, resolverName, a)  {
//     const stateObj = this.props.state[obj];
//     for (var keys in stateObj) {
//       for (var keyData in stateObj[keys]) {
//         if (keyData === "data") {
//           const allObj = stateObj[keys][keyData][resolverName];
//           if (allObj) {
//             var x = jwtDecode(allObj);
//             return x.sub.email;
//           }
//         }
//       }
//     }
//   };

//   componentDidMount() {
//     this.props.chatGroup("2");
//     // this.props.message();
//   }

//   // buttonEnter (e) {
//   //   if (e.key === "Enter") this.props.onLogin(login, password);
//   // };

//   // const handleClick = () => history.push("/my_profile");

//   render(){
//   return (
//     <div className="login">
//       <div className="login-form"
//       // onKeyPress={buttonEnter}
//       >
//         <div className="login-title">
//           <h2>Войти в аккаунт</h2>
//           <p>Пожалуйста, войдите в свой аккаунт</p>
//         </div>

//         <div className="login-icon icon">
//           <UserOutlined />
//           <input
//             id="login"
//             value={this.state.login}
//             placeholder="Логин"
//             type="text"
//             onChange={(e) => this.setState({ login: e.target.value })}
//           />
//         </div>

//         <div className="password-icon icon">
//           <LockOutlined />
//           <input
//             id="password"
//             value={this.state.password}
//             placeholder="Пароль"
//             type="password"
//             onChange={(e) => this.setState({ password: e.target.value })}
//           />
//           <div className="not-see" onClick={loginEye}>
//             <EyeInvisibleOutlined />
//           </div>
//           <div className="see" onClick={loginEye}>
//             <EyeOutlined />
//           </div>
//         </div>

//         {this.way("login", "getLogin")}

//         <button
//           className="login-button"
//           onClick={() => this.props.onLogin(this.state.login, this.state.password)}
//           disabled={!this.state.login || !this.state.password}
//         >
//           Войти
//         </button>

//         <div className="register-put-password">
//           <Link to="/sign_up">Зарегестрироваться</Link>
//           <Link to="/put_password">Забыли пароль?</Link>
//         </div>
//       </div>
//     </div>
//   )}
// };

const Login = (props) => <ConnectedLoginForm />;

const ConnectedLoginForm = connect(
  (state) => {
    return { state };
  },
  { onLogin: actionLogin, chatGroup: actionChatGroup }
)(LoginForm);

export default Login;