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

// IMPORT COMPONENTS
import Breadcrumb from "../components/global/Breadcrumb";
import ModalForm from "../components/cards/ModalForm";
import Success from "../components/global/Success";
import ProgressLoader from "../components/global/ProgressLoader";
import Error from "../components/global/Error";

// IMPORT IMAGES
import card from "../icons/card-black.svg";
import add from "../icons/add.svg";
import allert from "../icons/info-circle.svg";

const Cards = () => {
  const { locale } = useContext(LanguageContext);
  const [error, setError] = useState(false);
  const [success, setSuccess] = useState(false);
  const { user } = useContext(UserContext);
  const [loader, setLoader] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [progress, setProgress] = useState(0);
  const [stage, setStage] = useState(1);
  useEffect(() => {
    if (modalOpen) {
      document.body.style.overflowY = "hidden";
    } else {
      document.body.style.overflowY = "visible";
    }
  }, [modalOpen]);
  return (
    <section className="cards">
      {error ? (
        <Error
          message={
            locale === "TKM"
              ? "Ýüzlenme ugradylmady"
              : locale === "РУС"
              ? "Не удалось отправить запрос"
              : locale === "ENG"
              ? "Failed to send request"
              : "Ýüzlenme ugradylmady"
          }
          setError={setError}
        />
      ) : null}
      {success ? (
        <Success
          message={
            locale === "TKM"
              ? "Ýüzlenme ugradyldy!"
              : locale === "РУС"
              ? "Ваш запрос успешно отправлен!"
              : locale === "ENG"
              ? "Request was successfully sent!"
              : "Ýüzlenme ugradyldy!"
          }
          setSuccess={setSuccess}
        />
      ) : null}
      <Breadcrumb
        image={card}
        link={"/home/cards"}
        linkTitle={
          locale === "TKM"
            ? "Plastik kartlar"
            : locale === "РУС"
            ? "Пластиковые карты"
            : locale === "ENG"
            ? "Plastic cards"
            : "Plastik kartlar"
        }
      />
      <ModalForm
        setModalOpen={setModalOpen}
        modalOpen={modalOpen}
        stage={stage}
        setStage={setStage}
        loader={loader}
        setLoader={setLoader}
        setSuccess={setSuccess}
        setError={setError}
        setProgress={setProgress}
      />
      {loader ? <ProgressLoader progress={progress} /> : null}
      <div className="container">
        <div className="cards-inner">
          <div className="card-title">
            <h2 className="cards-title">
              {locale === "TKM"
                ? "Kart almak üçin onlaýn-ýüzlenme"
                : locale === "РУС"
                ? "Онлайн-заявка для получения карты"
                : locale === "ENG"
                ? "Online application for card issuance"
                : "Kart almak üçin onlaýn-ýüzlenme"}
            </h2>
            <button
              type="button"
              className="card-btn sign-btn"
              onClick={() => {
                window.scrollTo(0, 0);
                setModalOpen(true);
                setStage(1);
              }}
            >
              <div className="card-img">
                <img src={add} alt="add" />
              </div>
              <h3>
                {locale === "TKM"
                  ? "Ýüzlenme doldurmak"
                  : locale === "РУС"
                  ? "Заполнить заявку"
                  : locale === "ENG"
                  ? "Fill in application"
                  : "Ýüzlenme doldurmak"}
              </h3>
            </button>
          </div>
          <div className="home-table-wrapper">
            <table className="home-table">
              <tbody>
                <tr className="table-head">
                  <th>ID</th>
                  <th>
                    {locale === "TKM"
                      ? "Görnüşi"
                      : locale === "РУС"
                      ? "Тип"
                      : locale === "ENG"
                      ? "Type"
                      : "Görnüşi"}
                  </th>
                  <th>
                    {locale === "TKM"
                      ? "Senesi"
                      : locale === "РУС"
                      ? "Дата"
                      : locale === "ENG"
                      ? "Date"
                      : "Senesi"}
                  </th>
                  <th>
                    {locale === "TKM"
                      ? "Ýagdaýy"
                      : locale === "РУС"
                      ? "Статус"
                      : locale === "ENG"
                      ? "Status"
                      : "Ýagdaýy"}
                  </th>
                  <th>
                    {locale === "TKM"
                      ? "Amal"
                      : locale === "РУС"
                      ? "Действие"
                      : locale === "ENG"
                      ? "Operation"
                      : "Amal"}
                  </th>
                </tr>
                {user ? (
                  user.online_card.length !== 0 ? (
                    user.online_card.map((el, i) => {
                      if (el.payed) {
                        return (
                          <tr key={i}>
                            <td>#{el.id}</td>
                            <td>{el.type}</td>
                            <td>{el.date}</td>
                            <td
                              className={
                                el.status === "kart_chykarylmady"
                                  ? "red"
                                  : el.status === "kart_chykaryldy" ||
                                    el.status === "kabul_edildi"
                                  ? "green"
                                  : ""
                              }
                            >
                              {el.status === "ugradyldy"
                                ? locale === "TKM"
                                  ? "Ugradyldy"
                                  : locale === "РУС"
                                  ? "Отправлено"
                                  : locale === "ENG"
                                  ? "Sent"
                                  : "Ugradyldy"
                                : el.status === "kabul_edildi"
                                ? locale === "TKM"
                                  ? "Kabul edildi"
                                  : locale === "РУС"
                                  ? "Принята"
                                  : locale === "ENG"
                                  ? "Accepted"
                                  : "Kabul edildi"
                                : el.status === "seredilyar"
                                ? locale === "TKM"
                                  ? "Görülyar"
                                  : locale === "РУС"
                                  ? "На стадии рассмотрения"
                                  : locale === "ENG"
                                  ? "Under consideration"
                                  : "Görülyar"
                                : el.status === "kart_chykaryldy"
                                ? locale === "TKM"
                                  ? "Tassyklandy"
                                  : locale === "РУС"
                                  ? "Утверждено"
                                  : locale === "ENG"
                                  ? "Approved"
                                  : "Tassyklandy"
                                : el.status === "kart_chykarylmady"
                                ? locale === "TKM"
                                  ? "Ret edildi"
                                  : locale === "РУС"
                                  ? "Отказано"
                                  : locale === "ENG"
                                  ? "Denied"
                                  : "Ret edildi"
                                : ""}
                            </td>
                            <td>
                              {el.status === "kart_chykarylmady" ? (
                                <div className="reject">
                                  <div className="reason">
                                    <h4>{el.action}</h4>
                                  </div>
                                  <img src={allert} alt="reject" />
                                </div>
                              ) : (
                                ""
                              )}
                            </td>
                          </tr>
                        );
                      }
                    })
                  ) : (
                    <tr>
                      <td>
                        {locale === "TKM"
                          ? "Tabşyrlan ýüzlenme ýok"
                          : locale === "РУС"
                          ? "Заявок на карты нет"
                          : locale === "ENG"
                          ? "There are no applications for card issuance"
                          : "Tabşyrlan ýüzlenme ýok"}
                      </td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                  )
                ) : (
                  <tr>
                    <td>
                      {locale === "TKM"
                        ? "Tabşyrlan ýüzlenme ýok"
                        : locale === "РУС"
                        ? "Заявок на карты нет"
                        : locale === "ENG"
                        ? "There are no applications for card issuance"
                        : "Tabşyrlan ýüzlenme ýok"}
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Cards;
