// 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 { sendRequestCard } from "../../backend/sendRequestCard";
import { reformatDate } from "../../helpers/reformatDate";

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

const CardStage6 = ({
  setStage,
  data,
  setLoader,
  setModalOpen,
  setProgress,
}) => {
  const { locale } = useContext(LanguageContext);
  const token = localStorage.getItem("userToken");
  const postUrl = destination + "/online_card";

  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.middlename ? data.middlename : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Doglan senesi"
                : locale === "РУС"
                ? "Дата рождения"
                : locale === "ENG"
                ? "Date of birth"
                : "Doglan senesi"}
              :
            </p>
            <h4>{data.birthdate ? reformatDate(data.birthdate) : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Mobil telefon"
                : locale === "РУС"
                ? "Мобильный телефон"
                : locale === "ENG"
                ? "Phone number"
                : "Mobil telefon"}
              :
            </p>
            <h4>{data.phone_number ? data.phone_number : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Öý telefon"
                : locale === "РУС"
                ? "Домашний телефон"
                : locale === "ENG"
                ? "Home phone number"
                : "Öý telefon"}
              :
            </p>
            <h4>{data.home_phone_number ? data.home_phone_number : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Email"
                : locale === "РУС"
                ? "Эл. адрес"
                : locale === "ENG"
                ? "Email"
                : "Email"}
              :
            </p>
            <h4>{data.email ? data.email : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "SMS-birikdirme"
                : locale === "РУС"
                ? "SMS - подключение"
                : locale === "ENG"
                ? "SMS connection"
                : "SMS-birikdirme"}
              :
            </p>
            <h4>
              {locale === "TKM"
                ? data.sms_notification
                  ? "Hawa"
                  : "Ýok"
                : locale === "РУС"
                ? data.sms_notification
                  ? "Да"
                  : "Нет"
                : locale === "ENG"
                ? data.sms_notification
                  ? "Yes"
                  : "No"
                : data.sms_notification
                ? "Hawa"
                : "Ýok"}
            </h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Pasportyň seriýasy"
                : locale === "РУС"
                ? "Серия и номер паспорта"
                : locale === "ENG"
                ? "Series and passport number"
                : "Pasportyň seriýasy"}
              :
            </p>
            <h4>{data.passport_series ? data.passport_series : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Pasport kim tarapyndan berildi"
                : locale === "РУС"
                ? "Кем выдан паспорт"
                : locale === "ENG"
                ? "Passport issued by"
                : "Pasport kim tarapyndan berildi"}
              :
            </p>
            <h4>{data.passport_by ? data.passport_by : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Ýaşaýan salgysy"
                : locale === "РУС"
                ? "Адрес прописки"
                : locale === "ENG"
                ? "Place of residence"
                : "Ýaşaýan salgysy"}
              :
            </p>
            <h4>{data.place_of_residence ? data.place_of_residence : "-"}</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"
                ? "Banka gelmek güni"
                : locale === "РУС"
                ? "Дата прихода в банк"
                : locale === "ENG"
                ? "Date of arrival at the bank"
                : "Banka gelmek güni"}
              :
            </p>
            <h4>
              {data.date_arrival_bank
                ? reformatDate(data.date_arrival_bank)
                : "-"}
            </h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Saýlanan wagt"
                : locale === "РУС"
                ? "Выбранное время"
                : locale === "ENG"
                ? "Selected time"
                : "Saýlanan wagt"}
              :
            </p>
            <h4>{data.selected_time ? data.selected_time : "-"}</h4>
          </li>
          <li>
            <p>
              {locale === "TKM"
                ? "Gizlin söz"
                : locale === "РУС"
                ? "Кодовое слово"
                : locale === "ENG"
                ? "Codeword"
                : "Gizlin söz"}
              :
            </p>
            <h4>{data.the_codeword ? data.the_codeword : "-"}</h4>
          </li>
        </ul>
      </div>
      <div className="cu-bottom cd-6-bottom">
        <button
          type="button"
          className="sign-btn reg-btn"
          onClick={() => {
            setStage(4);
          }}
        >
          <div>
            <div className="btn-img">
              <img src={next_reverse} alt="logout" />
            </div>
            <h3
              onClick={() => {
                setStage(4);
              }}
            >
              {locale === "TKM"
                ? "Redaktirlemek"
                : locale === "РУС"
                ? "Редактировать"
                : locale === "ENG"
                ? "Edit"
                : "Redaktirlemek"}
            </h3>
          </div>
        </button>
        <button
          type="button"
          className="sign-btn cu-btn"
          onClick={() => {
            setLoader(true);
            setModalOpen(false);
            sendRequestCard(postUrl, token, data, 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 CardStage6;
