import React, { useState } from "react";
import { Navigate } from "react-router-dom";

import { useFormValidation } from "@hooks/useFormValidation";
import { useNotification } from "@hooks/useNotification";

import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import { ModalTrackerRegistration } from "@components/Modal/ModalTrackerRegistration/ModalTrackerRegistration";
import SideBar from "@components/SideBar/SideBar";

import arrowInfo from "assets/icons/trackerIntroInfo.svg";
import authImg from "assets/images/partnerProfile/authCandidateFormImg.png";
import registrationImg from "assets/images/trackerRegistrationImg.png";

import "./trackerRegistration.scss";

export const TrackerRegistration = () => {
  const [modalConfirmOpen, setModalConfirm] = useState(false);
  const fields = {
    username: "",
    email: "",
    password: "",
    secondPassword: ""
  };

  const apiEndpoint = "/register/sign-up";

  const { showNotification } = useNotification();
  const showNotificationError = () => {
    showNotification({
      show: true,
      text: "Аккаунт с таким логином или email уже существует",
      type: "error"
    });
  };
  const showNotificationTrue = () => {
    showNotification({
      show: true,
      text: "Аккаунт успешно создан",
      type: "success"
    });
  };

  const { formData, validationErrors, handleChange, handleSubmit } =
    useFormValidation(
      apiEndpoint,
      fields,
      showNotificationError,
      showNotificationTrue
    );

  return (
    <div className="tracker-registration">
      <AuthHeader />
      <SideBar />
      <div className="tracker-auth__content">
        <div className="container">
          <h1 className="tracker-auth__title">
            Создайте свое{" "}
            <span>
              рабочее пространство
              <img src={arrowInfo} alt="arrow" />
            </span>
          </h1>
          <div className="tracker-registration__form">
            <div className="tracker-registration__form__inputs">
              <div className="tracker-registration__input-container">
                <h5>Ваше имя</h5>
                <input
                  placeholder="Имя"
                  className={validationErrors.username ? "error" : ""}
                  onChange={handleChange}
                  value={formData.username}
                  id="username"
                />
                <span>{validationErrors.username}</span>
              </div>
              <div className="tracker-registration__input-container">
                <h5>Ваш e-mail</h5>
                <input
                  onChange={handleChange}
                  className={validationErrors.email ? "error" : ""}
                  placeholder="E-mail"
                  type="email"
                  id="email"
                  value={formData.email}
                />
                <span>{validationErrors.email}</span>
              </div>
              <div className="tracker-registration__input-container">
                <h5>Придумайте пароль</h5>
                <input
                  placeholder="Пароль"
                  className={validationErrors.password ? "error" : ""}
                  onChange={handleChange}
                  value={formData.password}
                  type="password"
                  id="password"
                />
                <span>{validationErrors.password}</span>
              </div>
              <div className="tracker-registration__input-container">
                <h5>Повторите пароль</h5>
                <input
                  placeholder="Повторите пароль"
                  className={validationErrors.secondPassword ? "error" : ""}
                  value={formData.secondPassword}
                  type="password"
                  onChange={handleChange}
                  id="secondPassword"
                />
                <span>{validationErrors.secondPassword}</span>
              </div>
            </div>
            <div className="tracker-registration__form__submit">
              <button
                onClick={async (e) => {
                  e.preventDefault();
                  const result = await handleSubmit(e);
                  if (result === true) {
                    setModalConfirm(true);
                  }
                }}
              >
                Отправить
              </button>
              <div className="tracker-registration__form__info">
                <img src={authImg} alt="img" />
                <p>
                  Создавайте и редактируйте задачи и проекты вместе с другими
                  участниками команды.
                </p>
              </div>
            </div>
            <img
              className="tracker-registration__form__img"
              src={registrationImg}
              alt="img"
            />
          </div>
        </div>
        {modalConfirmOpen && (
          <ModalLayout active={modalConfirmOpen} setActive={setModalConfirm}>
            <ModalTrackerRegistration
              setModalReset={setModalConfirm}
              email={formData.email}
            />
          </ModalLayout>
        )}
      </div>
      <Footer />
    </div>
  );
};