// IMPORT MODULES
import React, { useState, useEffect, useContext } from "react";
import { UserContext } from "../../backend/UserContext";
import { LanguageContext } from "../../backend/LanguageContext";

// IMPORT VALIDATORS
import { getDate } from "../../helpers/Date";

// IMPORT IMAGES
import next from "../../icons/next.svg";
import next_reverse from "../../icons/next-reverse.svg";

const TopupStage2 = ({ setStage, data, setData }) => {
  const { locale } = useContext(LanguageContext);
  const { user } = useContext(UserContext);
  const [inputValid] = useState({
    surname: data.surname ? data.surname : user ? user.surname : null,
    name: data.name ? data.name : user ? user.name : null,
    fathers: data.fathers ? data.fathers : user ? user.middle_name : null,
    date: data.date ? data.date : user ? user.date_birth : null,
    passport: data.passport ? data.passport : user ? user.passport : null,
    p_address: data.p_address
      ? data.p_address
      : user
      ? user.place_passport
      : null,
    address: data.address ? data.address : user ? user.address_residence : null,
    mail: data.email ? data.email : user ? user.email : null,
    mobile: data.mobile ? data.mobile : user ? user.mobile_phone : null,
    home: data.home ? data.home : user ? user.home_phone : null,
  });
  const [btnEnabled, setBtnEnabled] = useState(false);

  useEffect(() => {
    if (
      inputValid.surname &&
      inputValid.name &&
      inputValid.fathers &&
      inputValid.date &&
      inputValid.passport &&
      inputValid.p_address &&
      inputValid.address &&
      inputValid.mail &&
      inputValid.mobile
    ) {
      setBtnEnabled(true);
    } else {
      setBtnEnabled(false);
    }
  }, [inputValid]);
  return (
    <section className="card-stage-2">
      <form>
        <div className="form-top">
          <div className="input-block">
            <label htmlFor="surname">
              {locale === "TKM"
                ? "Hasaba almak"
                : locale === "РУС"
                ? "Регистрация"
                : locale === "ENG"
                ? "Sign up"
                : "Hasaba almak"}
              <span>*</span>
            </label>
            <input
              readOnly
              type="text"
              id="surname"
              defaultValue={inputValid.surname}
            />
          </div>
          <div className="input-block">
            <label htmlFor="name">
              {locale === "TKM"
                ? "Ady"
                : locale === "РУС"
                ? "Имя"
                : locale === "ENG"
                ? "First name"
                : "Ady"}
              <span>*</span>
            </label>
            <input
              readOnly
              type="text"
              id="name"
              defaultValue={inputValid.name}
            />
          </div>
          <div className="input-block">
            <label htmlFor="fathers">
              {locale === "TKM"
                ? "Atasynyň ady"
                : locale === "РУС"
                ? "Отчество"
                : locale === "ENG"
                ? "Middle name"
                : "Atasynyň ady"}
              <span>*</span>
            </label>
            <input
              readOnly
              type="text"
              id="fathers"
              defaultValue={inputValid.fathers}
            />
          </div>
          <div className="input-block">
            <label htmlFor="date">
              {locale === "TKM"
                ? "Doglan senesi"
                : locale === "РУС"
                ? "Дата рождения"
                : locale === "ENG"
                ? "Date of birth"
                : "Doglan senesi"}
              <span>*</span>
            </label>
            <input
              readOnly
              type="date"
              id="date"
              defaultValue={inputValid.date}
              min="1900-01-01"
              max={getDate(18)}
            />
          </div>
          <div className="input-block">
            <label htmlFor="passport">
              {locale === "TKM"
                ? "Pasport maglumatlary"
                : locale === "РУС"
                ? "Паспортные данные"
                : locale === "ENG"
                ? "Passport data"
                : "Pasport maglumatlary"}

              <span>*</span>
            </label>
            <input
              readOnly
              type="text"
              id="passport"
              defaultValue={inputValid.passport}
            />
          </div>
          <div className="input-block">
            <label htmlFor="p-address">
              {locale === "TKM"
                ? "Pasportyň berlen ýeri"
                : locale === "РУС"
                ? "Место выдачи паспорта"
                : locale === "ENG"
                ? "Place of issue of the passport"
                : "Pasportyň berlen ýeri"}
              <span>*</span>
            </label>
            <input
              readOnly
              type="text"
              id="p-address"
              defaultValue={inputValid.p_address}
            />
          </div>
          <div className="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
              readOnly
              type="text"
              id="address"
              defaultValue={inputValid.address}
            />
          </div>
          <div className="input-block">
            <label htmlFor="mail">
              {locale === "TKM"
                ? "Email"
                : locale === "РУС"
                ? "Эл. адрес"
                : locale === "ENG"
                ? "Email"
                : "Email"}
              <span>*</span>
            </label>
            <input
              readOnly
              type="email"
              id="mail"
              defaultValue={inputValid.mail}
            />
          </div>
          <div className="input-block">
            <label htmlFor="mobile">
              {locale === "TKM"
                ? "Mobil telefon"
                : locale === "РУС"
                ? "Мобильный телефон"
                : locale === "ENG"
                ? "Phone number"
                : "Mobil telefon"}
              <span>*</span>
            </label>
            <input
              readOnly
              type="text"
              id="mobile"
              defaultValue={inputValid.mobile}
            />
          </div>
          <div className="input-block">
            <label htmlFor="homeTel">
              {locale === "TKM"
                ? "Öý telefon"
                : locale === "РУС"
                ? "Домашний телефон"
                : locale === "ENG"
                ? "Home phone number"
                : "Öý telefon"}
            </label>
            <input
              readOnly
              type="text"
              id="homeTel"
              defaultValue={inputValid.home}
            />
          </div>
        </div>
        <div className="form-bottom">
          <div className="cu-bottom cd-2-title">
            <button
              type="button"
              className="sign-btn reg-btn"
              onClick={() => {
                setStage(1);
              }}
            >
              <div>
                <div className="btn-img">
                  <img src={next_reverse} alt="logout" />
                </div>
                <h3
                  onClick={() => {
                    setStage(1);
                  }}
                >
                  {locale === "TKM"
                    ? "Yza"
                    : locale === "РУС"
                    ? "Назад"
                    : locale === "ENG"
                    ? "Back"
                    : "Yza"}
                </h3>
              </div>
            </button>
            <button
              type="button"
              disabled={!btnEnabled}
              className="sign-btn cu-btn"
              onClick={() => {
                setStage(3);
                setData({
                  ...data,
                  name: inputValid.name,
                  surname: inputValid.surname,
                  fathers: inputValid.fathers,
                  address: inputValid.address,
                  birth: inputValid.date.toString(),
                  email: inputValid.mail,
                  p_address: inputValid.p_address,
                  passport: inputValid.passport,
                  mobile: inputValid.mobile,
                  home: inputValid.home,
                });
              }}
            >
              <div>
                <h3>
                  {locale === "TKM"
                    ? "Dowam et"
                    : locale === "РУС"
                    ? "Продолжить"
                    : locale === "ENG"
                    ? "Proceed"
                    : "Dowam et"}
                </h3>
                <div className="btn-img">
                  <img src={next} alt="logout" />
                </div>
              </div>
            </button>
          </div>
        </div>
      </form>
    </section>
  );
};

export default TopupStage2;
