// IMPORT MODULES
import React, { useState, useEffect, useRef, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { UserContext } from '../../backend/UserContext';
import ReCAPTCHA from 'react-google-recaptcha';

// IMPORT IMAGES
import up from '../../icons/clipboard-white.svg';
import eye from '../../icons/eye.svg';

// IMPORT COMPONENTS
import CustomSelect from '../global/CustomSelect';
import LogoBg from '../global/LogoBg';
import Loader from '../global/Loader';

// IMPORT FUNCTIONS
import { loginUser } from '../../backend/loginUser';

// IMPORT HELPERS
import { ValidatePassword } from '../../validators/ValidatePassword';
import { ValidateEmail } from '../../validators/ValidateEmail';
import { ValidateUserName } from '../../validators/ValidateUserName';
import { ValidatePhoneNumber } from '../../validators/ValidatePhoneNumber';
import { getDate } from '../../helpers/Date';
import { LanguageContext } from '../../backend/LanguageContext';

// SITEKEY
import { sitekey } from '../../recaptcha';

// URL
import { destination } from '../../destinationUrl';

const RegForm = () => {
  const { locale } = useContext(LanguageContext);
  const [isPassword, setIsPassword] = useState(true);
  const [error, setError] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const checkFirstLoad = useRef(true);
  const postUrl = destination + '/signup';
  const form = new FormData();
  const [formData, setFormData] = useState();
  const { user, setUser } = useContext(UserContext);
  const navigate = useNavigate();
  const [passwords, setPasswords] = useState({
    p1: '',
    p2: '',
  });

  const [inputValid, setInputValid] = useState({
    surname: null,
    name: null,
    fathers: null,
    date: null,
    ppNum: null,
    ppAddr: null,
    address: null,
    email: null,
    mobileTel: null,
    homeTel: null,
    user: null,
    password: null,
    match: false,
    captcha: false,
  });

  const [ppSerie, setPpSerie] = useState(null);
  const [ppPrefix, setPpPrefix] = useState(null);

  const [validateTop, setValidateTop] = useState(false);
  const [validateBottom, setValidateBottom] = useState(false);
  const [btnEnabled, setBtnEnabled] = useState(false);

  useEffect(() => {
    if (passwords.p1 === passwords.p2) {
      setInputValid({ ...inputValid, match: true });
    } else {
      setInputValid({ ...inputValid, match: false });
    }
  }, [passwords]);

  useEffect(() => {
    if (
      inputValid.surname &&
      inputValid.name &&
      inputValid.fathers &&
      inputValid.date &&
      ppSerie &&
      ppPrefix &&
      inputValid.ppNum &&
      inputValid.ppAddr &&
      inputValid.address &&
      inputValid.email &&
      inputValid.mobileTel &&
      inputValid.homeTel &&
      inputValid.user &&
      inputValid.password &&
      inputValid.match &&
      inputValid.captcha
    ) {
      setBtnEnabled(true);
    } else {
      setBtnEnabled(false);
    }
  }, [inputValid, ppSerie, ppPrefix]);

  useEffect(() => {
    if (checkFirstLoad.current) {
      checkFirstLoad.current = false;
    } else {
      loginUser(postUrl, formData, setUser, true, setError, setIsLoading);
    }
  }, [formData]);

  useEffect(() => {
    if (user) {
      navigate('/home');
    } else {
      navigate('/sign-up');
    }
  }, [user, navigate]);

  useEffect(() => {
    const inputDate = document.querySelector('#date');
    inputDate.min = new Date(Date.now() - 504911232000).toISOString().split('T')[0];
    inputDate.max = new Date().toISOString().split('T')[0];
    document.getElementById('date').setAttribute('min', '1960-01-01');
  }, []);

  return (
    <section className="reg">
      <LogoBg />
      <form
        onSubmit={(e) => {
          e.preventDefault();
        }}>
        {isLoading ? <Loader /> : ''}
        <div className="reg-top">
          <h2 className="reg-title">
            {locale === 'TKM'
              ? 'Hasaba almak'
              : locale === 'РУС'
              ? 'Регистрация'
              : locale === 'ENG'
              ? 'Sign up'
              : 'Hasaba almak'}
          </h2>
          <div className="reg-input-wrapper">
            <div className="reg-input-block">
              <label htmlFor="surname">
                {locale === 'TKM'
                  ? 'Familiýasy'
                  : locale === 'РУС'
                  ? 'Фамилия'
                  : locale === 'ENG'
                  ? 'Last name'
                  : 'Familiýasy'}
                <span>*</span>
              </label>
              <input
                autoComplete="true"
                type="text"
                placeholder="Amanow"
                name="surname"
                id="surname"
                required
                onChange={(e) => {
                  setValidateTop(true);
                  if (e.target.value !== '') {
                    setInputValid({ ...inputValid, surname: e.target.value });
                  } else {
                    setInputValid({ ...inputValid, surname: null });
                  }
                }}
              />
              {validateTop ? (
                <span className={inputValid.surname ? 'pass-check' : 'pass-check active'}>
                  {locale === 'TKM'
                    ? 'Familiýasy gerek'
                    : locale === 'РУС'
                    ? 'Требуется фамилия'
                    : locale === 'ENG'
                    ? 'Surname is required'
                    : 'Familiýasy gerek'}
                </span>
              ) : (
                ''
              )}
            </div>
            <div className="reg-input-block">
              <label htmlFor="name">
                {locale === 'TKM'
                  ? 'Ady'
                  : locale === 'РУС'
                  ? 'Имя'
                  : locale === 'ENG'
                  ? 'First name'
                  : 'Ady'}
                <span>*</span>
              </label>
              <input
                autoComplete="true"
                type="text"
                placeholder="Aman"
                name="name"
                id="name"
                required
                onChange={(e) => {
                  setValidateTop(true);
                  if (e.target.value !== '') {
                    setInputValid({ ...inputValid, name: e.target.value });
                  } else {
                    setInputValid({ ...inputValid, name: null });
                  }
                }}
              />
              {validateTop ? (
                <span className={inputValid.name ? 'pass-check' : 'pass-check active'}>
                  {locale === 'TKM'
                    ? 'Ady gerek'
                    : locale === 'РУС'
                    ? 'Требуется фамилия'
                    : locale === 'ENG'
                    ? 'Name is required'
                    : 'Ady gerek'}
                </span>
              ) : (
                ''
              )}
            </div>
            <div className="reg-input-block">
              <label htmlFor="fname">
                {locale === 'TKM'
                  ? 'Atasynyň ady'
                  : locale === 'РУС'
                  ? 'Отчество'
                  : locale === 'ENG'
                  ? 'Middle name'
                  : 'Atasynyň ady'}
                <span>*</span>
              </label>
              <input
                autoComplete="true"
                type="text"
                placeholder="Amanowich"
                name="fathers"
                id="fname"
                required
                onChange={(e) => {
                  setValidateTop(true);
                  if (e.target.value !== '') {
                    setInputValid({ ...inputValid, fathers: e.target.value });
                  } else {
                    setInputValid({ ...inputValid, fathers: null });
                  }
                }}
              />
              {validateTop ? (
                <span className={inputValid.fathers ? 'pass-check' : 'pass-check active'}>
                  {locale === 'TKM'
                    ? 'Atasynyň ady gerek'
                    : locale === 'РУС'
                    ? 'Требуется фамилия'
                    : locale === 'ENG'
                    ? 'Middle name is required'
                    : 'Atasynyň ady gerek'}
                </span>
              ) : (
                ''
              )}
            </div>
            <div className="reg-input-block">
              <label htmlFor="date">
                {locale === 'TKM'
                  ? 'Doglan senesi'
                  : locale === 'РУС'
                  ? 'Дата рождения'
                  : locale === 'ENG'
                  ? 'Date of birth'
                  : 'Doglan senesi'}
                <span>*</span>
              </label>
              <input
                autoComplete="true"
                type="date"
                name="date"
                min="1960-01-01"
                placeholder="дд / мм / гггг"
                id="date"
                required
                onChange={(e) => {
                  setValidateTop(true);
                  if (e.target.value !== '') {
                    setInputValid({ ...inputValid, date: e.target.value });
                  } else {
                    setInputValid({ ...inputValid, date: null });
                  }
                }}
              />
            </div>
            <div className="reg-input-block">
              <div
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  gap: '1.4rem',
                }}>
                <div className="split">
                  <div className="split-block">
                    <label htmlFor="serie">
                      {locale === 'TKM'
                        ? 'Seriýa-I'
                        : locale === 'РУС'
                        ? 'Серия-I'
                        : locale === 'ENG'
                        ? 'Series-I'
                        : 'Seriýa-I'}
                      <span>*</span>
                    </label>
                    <CustomSelect
                      items={['I', 'II', 'III', 'IV']}
                      blockName={'select-block'}
                      elName={'select-el'}
                      customId={'serie'}
                      name={'passport-serie'}
                      stateSetter={(e) => {
                        setPpSerie(e);
                      }}
                      eTarget={true}
                      placeholder="I"
                    />
                  </div>
                  <div className="split-block">
                    <label htmlFor="reg">
                      {locale === 'TKM'
                        ? 'Seriýa-II'
                        : locale === 'РУС'
                        ? 'Серия-II'
                        : locale === 'ENG'
                        ? 'Series-II'
                        : 'Seriýa-II'}
                      <span>*</span>
                    </label>
                    <CustomSelect
                      items={['AŞ', 'AH', 'DZ', 'MR', 'BN', 'LB']}
                      blockName={'select-block'}
                      elName={'select-el'}
                      customId={'reg'}
                      name={'passport-reg'}
                      stateSetter={(e) => {
                        setPpPrefix(e);
                      }}
                      eTarget={true}
                      placeholder="AŞ"
                    />
                  </div>
                  <div className="split-block">
                    <label htmlFor="num">
                      {locale === 'TKM'
                        ? 'Pasportyň belgisi'
                        : locale === 'РУС'
                        ? 'Номер паспорта'
                        : locale === 'ENG'
                        ? 'Passport number'
                        : 'Pasportyň belgisi'}
                      <span>*</span>
                    </label>
                    <input
                      autoComplete="true"
                      type="text"
                      name="num"
                      maxLength={6}
                      placeholder="212121"
                      id="num"
                      required
                      onChange={(e) => {
                        setValidateTop(true);
                        if (e.target.value !== '') {
                          setInputValid({
                            ...inputValid,
                            ppNum: e.target.value,
                          });
                        } else {
                          setInputValid({ ...inputValid, ppNum: null });
                        }
                      }}
                    />
                  </div>
                </div>
                <div>
                  {validateTop ? (
                    <span
                      className={
                        ppSerie && ppPrefix && inputValid.ppNum ? 'pass-check' : 'pass-check active'
                      }>
                      {locale === 'TKM'
                        ? 'Bu maglumatlar zerurdyr'
                        : locale === 'РУС'
                        ? 'Эта информация обязательна'
                        : locale === 'ENG'
                        ? 'This information is required'
                        : 'Bu maglumatlar zerurdyr'}
                    </span>
                  ) : (
                    ''
                  )}
                </div>
              </div>
            </div>
            <div className="reg-input-block">
              <label htmlFor="place">
                {locale === 'TKM'
                  ? 'Pasportyň berlen ýeri'
                  : locale === 'РУС'
                  ? 'Место выдачи паспорта'
                  : locale === 'ENG'
                  ? 'Place of issue of the passport'
                  : 'Pasportyň berlen ýeri'}
                <span>*</span>
              </label>
              <input
                autoComplete="true"
                type="text"
                name="place"
                placeholder="Kopetdag etrapyň häkimliki"
                id="place"
                required
                onChange={(e) => {
                  setValidateTop(true);
                  if (e.target.value !== '') {
                    setInputValid({ ...inputValid, ppAddr: e.target.value });
                  } else {
                    setInputValid({ ...inputValid, ppAddr: null });
                  }
                }}
              />
              {validateTop ? (
                <span className={inputValid.ppAddr ? 'pass-check' : 'pass-check active'}>
                  {locale === 'TKM'
                    ? 'Bu meýdan hökmanydyr'
                    : locale === 'РУС'
                    ? 'Это поле обязательно'
                    : locale === 'ENG'
                    ? 'This field is required'
                    : 'Bu meýdan hökmanydyr'}
                </span>
              ) : (
                ''
              )}
            </div>
            <div className="reg-input-block">
              <label htmlFor="address">
                {locale === 'TKM'
                  ? 'Ýaşaýan salgysy'
                  : locale === 'РУС'
                  ? 'Адрес проживания'
                  : locale === 'ENG'
                  ? 'Address of residence'
                  : 'Ýaşaýan salgysy'}

                <span>*</span>
              </label>
              <input
                autoComplete="true"
                type="text"
                name="address"
                placeholder="Parahat 3/1, j.16, k.5"
                id="address"
                required
                onChange={(e) => {
                  setValidateTop(true);
                  if (e.target.value !== '') {
                    setInputValid({ ...inputValid, address: e.target.value });
                  } else {
                    setInputValid({ ...inputValid, address: null });
                  }
                }}
              />
            </div>
            <div className="reg-input-block">
              <label htmlFor="email">
                {locale === 'TKM'
                  ? 'Email'
                  : locale === 'РУС'
                  ? 'Электронная почта'
                  : locale === 'ENG'
                  ? 'Email'
                  : 'Email'}

                <span>*</span>
              </label>
              <input
                autoComplete="true"
                type="email"
                name="email"
                placeholder="amanowaman@gmail.com"
                id="email"
                required
                onChange={(e) => {
                  setValidateTop(true);
                  if (ValidateEmail(e.target.value)) {
                    setInputValid({ ...inputValid, email: e.target.value });
                  } else {
                    setInputValid({ ...inputValid, email: null });
                  }
                }}
              />
              {validateTop ? (
                <span className={inputValid.email ? 'pass-check' : 'pass-check active'}>
                  {locale === 'TKM'
                    ? 'Nädogry email girizildi'
                    : locale === 'РУС'
                    ? 'Введен неверный email'
                    : locale === 'ENG'
                    ? 'Invalid email'
                    : 'Nädogry email girizildi'}
                </span>
              ) : (
                ''
              )}
            </div>
            <div className="reg-input-block">
              <label htmlFor="mobile">
                {locale === 'TKM'
                  ? 'Mobil telefon'
                  : locale === 'РУС'
                  ? 'Мобильный телефон'
                  : locale === 'ENG'
                  ? 'Phone number'
                  : 'Mobil telefon'}
                <span>*</span>
              </label>
              <input
                autoComplete="true"
                type="text"
                name="mobile"
                placeholder="+99365123456"
                id="mobile"
                required
                onChange={(e) => {
                  setValidateTop(true);
                  if (ValidatePhoneNumber(e.target.value)) {
                    setInputValid({ ...inputValid, mobileTel: e.target.value });
                  } else {
                    setInputValid({ ...inputValid, mobileTel: null });
                  }
                }}
              />
              {validateTop ? (
                <span className={inputValid.mobileTel ? 'pass-check' : 'pass-check active'}>
                  {locale === 'TKM'
                    ? 'Nädogry belgi girizildi'
                    : locale === 'РУС'
                    ? 'Введен неверный номер'
                    : locale === 'ENG'
                    ? 'Invalid phone number'
                    : 'Nädogry belgi girizildi'}
                </span>
              ) : (
                ''
              )}
            </div>
            <div className="reg-input-block">
              <label htmlFor="hometel">
                {locale === 'TKM'
                  ? 'Öý telefon'
                  : locale === 'РУС'
                  ? 'Домашний телефон'
                  : locale === 'ENG'
                  ? 'Home phone number'
                  : 'Öý telefon'}
                <span>*</span>
              </label>
              <input
                autoComplete="true"
                type="text"
                name="hometel"
                placeholder="+99312123456"
                id="hometel"
                required
                onChange={(e) => {
                  setValidateTop(true);
                  if (ValidatePhoneNumber(e.target.value)) {
                    setInputValid({ ...inputValid, homeTel: e.target.value });
                  } else {
                    setInputValid({ ...inputValid, homeTel: null });
                  }
                }}
              />
              {validateTop ? (
                <span className={inputValid.homeTel ? 'pass-check' : 'pass-check active'}>
                  {locale === 'TKM'
                    ? 'Nädogry belgi girizildi'
                    : locale === 'РУС'
                    ? 'Введен неверный номер'
                    : locale === 'ENG'
                    ? 'Invalid phone number'
                    : 'Nädogry belgi girizildi'}
                </span>
              ) : (
                ''
              )}
            </div>
          </div>
        </div>
        <div className="reg-top reg-bottom">
          <h2 className="reg-title">
            {locale === 'TKM'
              ? 'Ulanyjynyň maglumatlary'
              : locale === 'РУС'
              ? 'Данные пользователя'
              : locale === 'ENG'
              ? 'User details'
              : 'Ulanyjynyň maglumatlary'}
          </h2>
          <div className="reg-input-wrapper">
            <div className="reg-input-block">
              <label htmlFor="user">
                {locale === 'TKM'
                  ? 'Ulanyjy'
                  : locale === 'РУС'
                  ? 'Пользователь'
                  : locale === 'ENG'
                  ? 'User'
                  : 'Ulanyjy'}
                <span>*</span>
              </label>
              <input
                autoComplete="true"
                type="text"
                name="user"
                placeholder="aman_amanow"
                id="user"
                required
                onChange={(e) => {
                  setValidateBottom(true);
                  if (ValidateUserName(e.target.value)) {
                    setInputValid({ ...inputValid, user: e.target.value });
                  } else {
                    setInputValid({ ...inputValid, user: null });
                  }
                }}
              />
              {validateBottom ? (
                <span className={inputValid.user ? 'pass-check' : 'pass-check active'}>
                  {locale === 'TKM'
                    ? 'Ulanyjy adynda "_" -dan başga ýörite belgiler bolup bilmez.'
                    : locale === 'РУС'
                    ? `Имя пользователя не может содержать особых знаков, кроме "_"`
                    : locale === 'ENG'
                    ? 'User name cannot contain special characters other than "_"'
                    : 'Ulanyjy adynda "_" -dan başga ýörite belgiler bolup bilmez.'}
                </span>
              ) : (
                ''
              )}
            </div>
            <div className="input-block-outer sp-outer">
              <div className="reg-input-block rel-block">
                <div
                  className="rel-img"
                  onClick={() => {
                    setIsPassword(!isPassword);
                  }}>
                  <img src={eye} alt="eye" />
                </div>
                <label htmlFor="pass">
                  {locale === 'TKM'
                    ? 'AAçar sözi'
                    : locale === 'РУС'
                    ? 'Пароль'
                    : locale === 'ENG'
                    ? 'Password'
                    : 'Açar sözi'}
                  <span>*</span>
                </label>
                <input
                  autoComplete="true"
                  type={isPassword ? 'password' : 'text'}
                  onCopy={(e) => {
                    e.preventDefault();
                  }}
                  name="pass"
                  id="pass"
                  required
                  onChange={(e) => {
                    setValidateBottom(true);
                    setPasswords({ ...passwords, p1: e.target.value });
                    if (ValidatePassword(e.target.value)) {
                      setInputValid({
                        ...inputValid,
                        password: e.target.value,
                      });
                    } else {
                      setInputValid({ ...inputValid, password: null });
                    }
                  }}
                />
              </div>
              {validateBottom ? (
                <span className={inputValid.password ? 'pass-check' : 'pass-check active'}>
                  {locale === 'TKM'
                    ? 'Açar sözi  8 belgiden az bolmadyk we 15 belgiden kän bolmadyk we iň azyndan 1 san, 1 baş harp we 1 setir harp, 1 ýörite bellikden ybarat bolmalydyr. '
                    : locale === 'РУС'
                    ? 'Пароль должен содержать не менее 1 цифры, 1 заглавной и 1 прописной буквы, 1 особого знака, и быть не менее 8 и не более 15 символов в длину.'
                    : locale === 'ENG'
                    ? 'The password must contain at least 1 number, 1 uppercase and 1 lowercase letters, 1 special character, and be at least 8 and not more than 15 characters long.'
                    : 'Açar sözi  8 belgiden az bolmadyk we 15 belgiden kän bolmadyk we iň azyndan 1 san, 1 baş harp we 1 setir harp, 1 ýörite bellikden ybarat bolmalydyr. '}
                </span>
              ) : (
                ''
              )}
            </div>
            <div className="reg-input-block">
              <label htmlFor="repeat-pass">
                {locale === 'TKM'
                  ? 'Açar sözi gaýtalaň'
                  : locale === 'РУС'
                  ? 'Повторите пароль'
                  : locale === 'ENG'
                  ? 'Confirm password'
                  : 'Açar sözi gaýtalaň'}
                <span>*</span>
              </label>
              <input
                onPaste={(e) => {
                  e.preventDefault();
                }}
                autoComplete="true"
                type="password"
                name="repeat-pass"
                id="repeat-pass"
                required
                onChange={(e) => {
                  setValidateBottom(true);
                  setPasswords({ ...passwords, p2: e.target.value });
                }}
              />
              {validateBottom ? (
                <span className={inputValid.match ? 'pass-check' : 'pass-check active'}>
                  {locale === 'TKM'
                    ? 'Açar sözler gabat gelmeli'
                    : locale === 'РУС'
                    ? 'Пароли должны совпадать'
                    : locale === 'ENG'
                    ? 'Passwords must match'
                    : 'Açar sözler gabat gelmeli'}
                </span>
              ) : (
                ''
              )}
            </div>
          </div>
        </div>
        {error ? (
          error === 'The email has already been taken.' ? (
            <h3 className="error">
              {locale === 'TKM'
                ? 'Bu email salgysy eýýäm ulanylýar'
                : locale === 'РУС'
                ? 'Этот адресс электронной почты уже используется'
                : locale === 'ENG'
                ? 'This email is already in use'
                : 'Bu email salgysy eýýäm ulanylýar'}
            </h3>
          ) : error === 'The username has already been taken.' ? (
            <h3 className="error">
              {locale === 'TKM'
                ? 'Bu ulanyjy ady eýýäm ulanylýar'
                : locale === 'РУС'
                ? 'Это имя пользователя уже используется'
                : locale === 'ENG'
                ? 'This username is already in use'
                : 'Bu email salgysy eýýäm ulanylýar'}
            </h3>
          ) : (
            ''
          )
        ) : (
          ''
        )}
        <div className="reg-btns">
          <div className="captcha-wrapper">
            <ReCAPTCHA
              className="captcha"
              sitekey={sitekey}
              onChange={(e) => {
                setInputValid({ ...inputValid, captcha: true });
              }}
            />
            {validateBottom ? (
              <span className={inputValid.captcha ? 'pass-check' : 'pass-check active'}>
                {locale === 'TKM'
                  ? 'Captcha gerek'
                  : locale === 'РУС'
                  ? 'Капча требуется'
                  : locale === 'ENG'
                  ? 'Captcha is required'
                  : 'Captcha gerek'}
              </span>
            ) : (
              ''
            )}
          </div>
          {locale === 'TKM' ? (
            <h2>
              ( <span>*</span> ) belgili ähli meýdançalar hökman doldurylmalydyrlar. Ähli
              meýdançalar latin harplary bilen ýazylmaly.
            </h2>
          ) : locale === 'РУС' ? (
            <h2>
              Все поля с символом ( <span>*</span> ) обязательны для заполнения. Все поля должны
              быть заполнены латиницей.
            </h2>
          ) : locale === 'ENG' ? (
            <h2>
              All fields with the symbol ( <span>*</span> ) are required. All fields must be filled
              in Latin.
            </h2>
          ) : (
            <h2>
              ( <span>*</span> ) belgili ähli meýdançalar hökman doldurylmalydyrlar. Ähli
              meýdançalar latin harplary bilen ýazylmaly.
            </h2>
          )}

          <button
            type="submit"
            disabled={!btnEnabled}
            className="sign-btn"
            onClick={() => {
              form.append('email', inputValid.email);
              form.append('password', inputValid.password);
              form.append('password_confirmation', inputValid.password);
              form.append('surname', inputValid.surname);
              form.append('name', inputValid.name);
              form.append('middle_name', inputValid.fathers);
              form.append('username', inputValid.user);
              form.append('date_birth', inputValid.date);
              form.append('address_residence', inputValid.address);
              form.append('mobile_phone', inputValid.mobileTel);
              form.append('home_phone', inputValid.homeTel);
              form.append('place_passport', inputValid.ppAddr);
              form.append('passport', `${ppSerie}-${ppPrefix}-${inputValid.ppNum}`);
              setFormData(form);
              setIsLoading(true);
            }}>
            <div>
              <h3>
                {locale === 'TKM'
                  ? 'Hasaba almak'
                  : locale === 'РУС'
                  ? 'Зарегистрироваться'
                  : locale === 'ENG'
                  ? 'Sign up'
                  : 'Hasaba almak'}
              </h3>
              <div className="btn-img">
                <img src={up} alt="logout" />
              </div>
            </div>
          </button>
        </div>
      </form>
    </section>
  );
};

export default RegForm;
