import React, { useState } from "react";

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

import BaseButton from "@components/Common/BaseButton/BaseButton";
import { Loader } from "@components/Common/Loader/Loader";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";

import anyMoment from "assets/icons/anyMoment.svg";
import doc from "assets/icons/doc.svg";
import telegramLogo from "assets/icons/tgLogo.svg";
import accept from "assets/images/accept.png";

import "./modalRegistration.scss";

export const ModalRegistration = ({ active, setActive }) => {
  const [loader, setLoader] = useState(false);
  const [isPartner, setIsPartner] = useState(false);

  const fields = {
    username: "",
    email: "",
    password: "",
    secondPassword: ""
  };
  const closeModal = () => {
    setActive(false);
    handleClearForm();
  };

  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,
    handleClearForm
  } = useFormValidation(
    apiEndpoint,
    fields,
    showNotificationError,
    showNotificationTrue,
    isPartner
  );

  return (
    <ModalLayout active={active} setActive={closeModal} styles={"registration"}>
      <div className="registration-body__main">
        <h2 className="registration-body__main-title">
          Подключайтесь к <span>ITguild</span>
        </h2>
        <p className="registration-body__main-desc">
          Зарегистрируйтесь и начните работу уже сегодня
        </p>

        <div className="input-body">
          <div className="input-body__box">
            <div className="input-container">
              <h5>Ваше имя</h5>
              <input
                className={validationErrors.username ? "error" : ""}
                onChange={handleChange}
                value={formData.username}
                placeholder="Имя"
                id="username"
              />
              <span>{validationErrors.username}</span>
            </div>
            <div className="input-container">
              <h5>E-mail</h5>
              <input
                type="email"
                className={validationErrors.email ? "error" : ""}
                onChange={handleChange}
                value={formData.email}
                placeholder="Почта"
                id="email"
              />
              <span>{validationErrors.email}</span>
            </div>
          </div>

          <div className="input-body__box">
            <div className="input-container">
              <h5>Пароль</h5>
              <input
                className={validationErrors.password ? "error" : ""}
                type="password"
                onChange={handleChange}
                value={formData.password}
                placeholder="Пароль"
                id="password"
              />
              <span>{validationErrors.password}</span>
            </div>
            <div className="input-container">
              <h5>Повторите пароль</h5>
              <input
                className={validationErrors.secondPassword ? "error" : ""}
                type="password"
                onChange={handleChange}
                value={formData.secondPassword}
                placeholder="Пароль"
                id="secondPassword"
              />
              <span>{validationErrors.secondPassword}</span>
            </div>
          </div>
        </div>
        <div
          className="input_checkbox"
          onClick={() => setIsPartner(!isPartner)}
        >
          <p>Партнер:</p>
          <span className={isPartner ? "checkbox--active" : ""}>
            {isPartner ? <img src={accept} alt="accept" /> : ""}
          </span>
        </div>

        <div className="button-box">
          {loader ? (
            <Loader />
          ) : (
            <BaseButton
              onClick={async (e) => {
                e.preventDefault();
                setLoader(true);
                const result = await handleSubmit(e);
                if (result === true) {
                  closeModal();
                }
                setLoader(false);
              }}
              styles="button-box__submit"
            >
              Отправить
            </BaseButton>
          )}
          {/*<h5>*/}
          {/*  У вас уже есть аккаунт? <p>Войти</p>*/}
          {/*</h5>*/}
        </div>
      </div>
      <div className="registration-body__about">
        <h4>Отказ от специалиста в любой момент</h4>
        <div className="registration-body__about-text">
          <img src={anyMoment}></img>
          <p>
            Поменяйте, откажитесь или возьмите еще специалиста в любой момент
            работы.
          </p>
        </div>
        <h4>100% постоплата</h4>
        <div className="registration-body__about-text">
          <img src={doc}></img>
          <p>
            Договор не подразумевает какую‑либо оплату до того, как вы
            арендовали специалиста
          </p>
        </div>
        <h4>Есть вопросы?</h4>
        <div className="registration-body__about-text">
          <img src={telegramLogo}></img>
          <p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
        </div>
      </div>
      <span onClick={() => closeModal()} className="exit"></span>
    </ModalLayout>
  );
};

export default ModalRegistration;