import React from "react";

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

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 form = useFormValidation();
  return (
    <div className="registrationCandidate">
      <AuthHeader />
      <div className="container">
        <div className="registrationCandidate__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="registrationCandidate__formWrapper">
            <div className="registrationCandidate__info">
              <div className="registrationCandidate__info__category">
                <img src={BackEndImg} alt="img" />
                <p>Backend разработчики</p>
              </div>
              <p className="registrationCandidate__info__skills">
                Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript
              </p>
              <div className="registrationCandidate__info__arrow">
                <img src={arrowBtn} alt="img" />
              </div>
            </div>
            {/* форма регистрации */}
            <form
              className="registrationCandidate__form"
              onSubmit={form.handleSubmit}
            >
              <div className="registrationCandidate__form__input">
                <label htmlFor="name">Ваше имя</label>
                <input
                  className={form.validationErrors.name ? "error" : ""}
                  value={form.formData.name}
                  onChange={form.handleChange}
                  id="name"
                  type="text"
                  placeholder="Имя"
                />
                <span>{form.validationErrors.name}</span>
              </div>
              <div className="registrationCandidate__form__input">
                <label htmlFor="summary">Если есть ссылка на резюме</label>
                <input
                  className={form.validationErrors.summary ? "error" : ""}
                  value={form.formData.summary}
                  onChange={form.handleChange}
                  id="summary"
                  type="url"
                  placeholder="Резюме"
                />
                <span>{form.validationErrors.summary}</span>
              </div>
              <div className="registrationCandidate__form__input">
                <label htmlFor="email">Ваш e-mail</label>
                <input
                  className={form.validationErrors.email ? "error" : ""}
                  value={form.formData.email}
                  onChange={form.handleChange}
                  id="email"
                  type="email"
                  placeholder="E-mail"
                />
                <span>{form.validationErrors.email}</span>
              </div>
              <div className="registrationCandidate__form__input">
                <label htmlFor="tg">Ваш telegram</label>
                <input
                  className={form.validationErrors.tg ? "error" : ""}
                  value={form.formData.tg}
                  onChange={form.handleChange}
                  id="tg"
                  type="text"
                  placeholder="Telegram"
                />
                <span>{form.validationErrors.tg}</span>
              </div>
              <div className="registrationCandidate__form__input">
                <label htmlFor="password">Придумайте пароль</label>
                <input
                  className={form.validationErrors.password ? "error" : ""}
                  value={form.formData.password}
                  onChange={form.handleChange}
                  id="password"
                  type="password"
                  placeholder="Пароль"
                />
                <span>{form.validationErrors.password}</span>
              </div>
              <div className="registrationCandidate__form__input">
                <label htmlFor="secondPassword">Повторите пароль</label>
                <input
                  className={
                    form.validationErrors.secondPassword ? "error" : ""
                  }
                  value={form.formData.secondPassword}
                  onChange={form.handleChange}
                  id="secondPassword"
                  type="password"
                  placeholder="Пароль"
                />
                <span>{form.validationErrors.secondPassword}</span>
              </div>
              <div className="registrationCandidate__form__submit">
                <button type="submit">Отправить</button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <SideBar />
      <Footer />
    </div>
  );
};