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

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

// IMPORT HELPERS
import { sendRequest } from "../../backend/sendRequest";
import { getUserInfo } from "../../backend/getUserInfo";
import { reformatDate } from "../../helpers/reformatDate";

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

const CreditStage6 = ({
  setStage,
  data,
  setModalOpen,
  setLoader,
  setSuccess,
  setError,
  setProgress,
}) => {
  const { locale } = useContext(LanguageContext);
  const { setUser } = useContext(UserContext);
  const token = localStorage.getItem("userToken");
  const postUrl = destination + "/online_credit";
  const getUrl = destination + "/me";
  return (
    <section className="card-stage-6">
      <div className="cd-6-top">
        <ul className="cd-6-list">
          <li>
            <p>
              {locale === "TKM"
                ? "Hasaba almak"
                : locale === "РУС"
                ? "Регистрация"
                : locale === "ENG"
                ? "Sign up"
                : "Hasaba almak"}
              :
            </p>
            <h4>{data.surname ? data.surname : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Ady"
                : locale === "РУС"
                ? "Имя"
                : locale === "ENG"
                ? "First name"
                : "Ady"}
              :
            </p>
            <h4>{data.name ? data.name : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Atasynyň ady"
                : locale === "РУС"
                ? "Отчество"
                : locale === "ENG"
                ? "Middle name"
                : "Atasynyň ady"}
              :
            </p>
            <h4>{data.fathers ? data.fathers : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Doglan senesi"
                : locale === "РУС"
                ? "Дата рождения"
                : locale === "ENG"
                ? "Date of birth"
                : "Doglan senesi"}
              :
            </p>
            <h4>{data.birth ? reformatDate(data.birth) : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Mobil telefon"
                : locale === "РУС"
                ? "Мобильный телефон"
                : locale === "ENG"
                ? "Phone number"
                : "Mobil telefon"}
              :
            </p>
            <h4>{data.mobile ? data.mobile : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Öý telefon"
                : locale === "РУС"
                ? "Домашний телефон"
                : locale === "ENG"
                ? "Home phone number"
                : "Öý telefon"}
              :
            </p>
            <h4>{data.home ? data.home : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Email"
                : locale === "РУС"
                ? "Эл. адрес"
                : locale === "ENG"
                ? "Email"
                : "Email"}
              :
            </p>
            <h4>{data.email ? data.email : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Pasportyň seriýasy"
                : locale === "РУС"
                ? "Серия и номер паспорта"
                : locale === "ENG"
                ? "Series and passport number"
                : "Pasportyň seriýasy"}
              :
            </p>
            <h4>{data.passport ? data.passport : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Pasport kim tarapyndan berildi"
                : locale === "РУС"
                ? "Кем выдан паспорт"
                : locale === "ENG"
                ? "Passport issued by"
                : "Pasport kim tarapyndan berildi"}
              :
            </p>
            <h4>{data.p_address ? data.p_address : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Ýaşaýan salgysy"
                : locale === "РУС"
                ? "Адрес прописки"
                : locale === "ENG"
                ? "Place of residence"
                : "Ýaşaýan salgysy"}
              :
            </p>
            <h4>{data.address ? data.address : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "AdWelaýaty"
                : locale === "РУС"
                ? "Регион"
                : locale === "ENG"
                ? "Region"
                : "Welaýat"}
              :
            </p>
            <h4>{data.region_localized ? data.region_localized : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Şahamça"
                : locale === "РУС"
                ? "Филиал"
                : locale === "ENG"
                ? "Branch"
                : "Şahamça"}
              :
            </p>
            <h4>{data.branch_localized ? data.branch_localized : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Iş ýeri"
                : locale === "РУС"
                ? "Место работы"
                : locale === "ENG"
                ? "Place of work"
                : "Iş ýeri"}
              :
            </p>
            <h4>{data.workplace ? data.workplace : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Aýlyk haky"
                : locale === "РУС"
                ? "Сумма зарплаты"
                : locale === "ENG"
                ? "Amount of salary"
                : "Aýlyk haky"}
              :
            </p>
            <h4>{data.salary ? data.salary : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Wezipesi"
                : locale === "РУС"
                ? "Должность"
                : locale === "ENG"
                ? "Job title"
                : "Wezipesi"}
              :
            </p>
            <h4>{data.position ? data.position : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Soňky iş ýeri boýunça tejribe"
                : locale === "РУС"
                ? "Стаж с последнего места работы"
                : locale === "ENG"
                ? "Length of service from last job"
                : "Soňky iş ýeri boýunça tejribe"}
              :
            </p>
            <h4>{data.exp ? data.exp : "-"}</h4>
          </li>
        </ul>
      </div>
      <div className="cu-bottom cd-6-bottom">
        <button
          className="sign-btn reg-btn"
          onClick={() => {
            setStage(5);
          }}
        >
          <div>
            <div className="btn-img">
              <img src={next_reverse} alt="logout" />
            </div>
            <h3
              onClick={() => {
                setStage(5);
              }}
            >
              {locale === "TKM"
                ? "Redaktirlemek"
                : locale === "РУС"
                ? "Редактировать"
                : locale === "ENG"
                ? "Edit"
                : "Redaktirlemek"}
            </h3>
          </div>
        </button>
        <button
          type="button"
          className="sign-btn cu-btn"
          onClick={() => {
            setModalOpen(false);
            setLoader(true);
            sendRequest(
              postUrl,
              token,
              data,
              () => {
                setSuccess(true);
                setTimeout(() => {
                  getUserInfo(getUrl, token, setUser, () => null);
                }, 2000);
              },
              setLoader,
              setError,
              setProgress
            );
          }}
        >
          <div>
            <h3>
              {locale === "TKM"
                ? "Tassyklaýaryn"
                : locale === "РУС"
                ? "Подтверждаю"
                : locale === "ENG"
                ? "Confirm"
                : "Tassyklaýaryn"}
            </h3>
            <div className="btn-img">
              <img src={next} alt="logout" />
            </div>
          </div>
        </button>
      </div>
    </section>
  );
};

export default CreditStage6;
