import React, { Schema, useState } from "react";
import { connect } from "react-redux";
import {
  UserOutlined,
  LockOutlined,
  EyeOutlined,
  EyeInvisibleOutlined,
} from "@ant-design/icons";

import { actionPutPassword } from "./actionPutPassword/actionPutPassword";
import "./putPassword.css";

const newPasswordEye = () => {
  const password = document.getElementById("newPassword");
  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 confirmNewPasswordEye = () => {
  const password = document.getElementById("confirmNewPassword");
  const notSee = document.querySelector(".not-see-confirm");
  const see = document.querySelector(".see-confirm");

  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 PutPasswordForm = ({putPassword}) => {
  const [email, setEmail] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmNewPassword, setConfirmNewPassword] = useState("");

  return (
    <div className="put-password">
      <div className="form-put">
        <div className="put-title">
          <h2>Забыли пароль?</h2>
          <p>Пожалуйста, введите ваш E-mail и новый пароль</p>
        </div>

        <div className="email-icon icon">
          <UserOutlined />
          <input
            id="email"
            value={email}
            placeholder="E-mail"
            type="text"
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>

        <div className="password-icon icon">
          <LockOutlined />
          <input
            id="newPassword"
            value={newPassword}
            placeholder="Новый пароль"
            type="password"
            onChange={(e) => setNewPassword(e.target.value)}
          />
          <div className="not-see" onClick={newPasswordEye}>
            <EyeInvisibleOutlined />
          </div>
          <div className="see" onClick={newPasswordEye}>
            <EyeOutlined />
          </div>
        </div>

        <div className="password-icon icon">
          <LockOutlined />
          <input
            id="confirmNewPassword"
            value={confirmNewPassword}
            placeholder="Повторите пароль"
            type="password"
            onChange={(e) => setConfirmNewPassword(e.target.value)}
          />
          <div className="not-see-confirm" onClick={confirmNewPasswordEye}>
            <EyeInvisibleOutlined />
          </div>
          <div className="see-confirm" onClick={confirmNewPasswordEye}>
            <EyeOutlined />
          </div>
        </div>

        <button
          className="login-button"
          onClick={() => putPassword(email, newPassword)}
          disabled={!email || !newPassword || !confirmNewPassword}
        >
          Проверка
        </button>
      </div>
    </div>
  );
};

const PutPassword = () => <ConnectedPutPasswordForm />;
const ConnectedPutPasswordForm = connect(state => {console.log([state.putPassword])}, {
  putPassword: actionPutPassword,
})(PutPasswordForm);

export default PutPassword;
