import React from "react";
import { Link } 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 SideBar from "@components/SideBar/SideBar";
import StepsForCandidate from "@components/StepsForCandidate/StepsForCandidate";

import arrowBtn from "assets/icons/arrows/arrowRight.svg";
import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";

import "./registationForCandidate.scss";

export const RegistrationForCandidate = () => {
  const apiEndpoint = "/register/sign-up";

  const fields = {
    username: "",
    summary: "",
    email: "",
    tg: "",
    password: "",
    secondPassword: ""
  };

  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="registration-candidate">
      <AuthHeader />
      <div className="container">
        <div className="registration-candidate__start">
          <h2 className="auth-candidate__start__title">
            Хочу в команду <span>IT-специалистов</span>
          </h2>
          <div className="change-mode__arrow">
            <img src={arrowBtn}></img>
          </div>
          <p className="auth-candidate__start__description">
            Для нас не имеет значения Ваша локация.
          </p>
          <StepsForCandidate step="шаг 2 - заполните данные" />
          <div className="registration-candidate__form-wrapper">
            <div className="registration-candidate__info">
              <div className="registration-candidate__info__category">
                <img src={BackEndImg} alt="img" />
                <p>Backend разработчики</p>
              </div>
              <p className="registration-candidate__info__skills">
                Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript
              </p>
              <Link
                to="/auth-candidate"
                className="registration-candidate__info__arrow"
              >
                <img src={arrowBtn} alt="img" />
              </Link>
            </div>
            {/* форма регистрации */}
            <form
              className="registration-candidate__form"
              onSubmit={handleSubmit}
            >
              <div className="registration-candidate__form__input">
                <label htmlFor="name">Ваше имя</label>
                <input
                  className={validationErrors.username ? "error" : ""}
                  value={formData.username}
                  onChange={handleChange}
                  id="username"
                  type="text"
                  placeholder="Имя"
                />
                <span>{validationErrors.username}</span>
              </div>
              <div className="registration-candidate__form__input">
                <label htmlFor="summary">Если есть ссылка на резюме</label>
                <input
                  className={validationErrors.summary ? "error" : ""}
                  value={formData.summary}
                  onChange={handleChange}
                  id="summary"
                  type="url"
                  placeholder="Резюме"
                />
                <span>{validationErrors.summary}</span>
              </div>
              <div className="registration-candidate__form__input">
                <label htmlFor="email">Ваш e-mail</label>
                <input
                  className={validationErrors.email ? "error" : ""}
                  value={formData.email}
                  onChange={handleChange}
                  id="email"
                  type="email"
                  placeholder="E-mail"
                />
                <span>{validationErrors.email}</span>
              </div>
              <div className="registration-candidate__form__input">
                <label htmlFor="tg">Ваш telegram</label>
                <input
                  className={validationErrors.tg ? "error" : ""}
                  value={formData.tg}
                  onChange={handleChange}
                  id="tg"
                  type="text"
                  placeholder="Telegram"
                />
                <span>{validationErrors.tg}</span>
              </div>
              <div className="registration-candidate__form__input">
                <label htmlFor="password">Придумайте пароль</label>
                <input
                  className={validationErrors.password ? "error" : ""}
                  value={formData.password}
                  onChange={handleChange}
                  id="password"
                  type="password"
                  placeholder="Пароль"
                />
                <span>{validationErrors.password}</span>
              </div>
              <div className="registration-candidate__form__input">
                <label htmlFor="secondPassword">Повторите пароль</label>
                <input
                  className={validationErrors.secondPassword ? "error" : ""}
                  value={formData.secondPassword}
                  onChange={handleChange}
                  id="secondPassword"
                  type="password"
                  placeholder="Пароль"
                />
                <span>{validationErrors.secondPassword}</span>
              </div>
              <div className="registration-candidate__form__submit">
                <button type="submit">Отправить</button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <SideBar />
      <Footer />
    </div>
  );
};