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

// IMPORT COMPONENTS
import Breadcrumb from "../components/global/Breadcrumb";
import Loader from "../components/global/Loader";

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

const Base = () => {
  const { locale } = useContext(LanguageContext);
  const { user } = useContext(UserContext);
  return (
    <section className="cards">
      <Breadcrumb />
      <div className="container">
        <div className="cards-inner">
          <h2 className="cards-title">
            {locale === "TKM"
              ? "Hoş geldiňiz"
              : locale === "РУС"
              ? "Добро пожаловать"
              : locale === "ENG"
              ? "Welcome"
              : "Hoş geldiňiz"}
            ,{" "}
            <span id="user">
              {user ? (
                user.name ? (
                  `${user.name} ${user.surname}`
                ) : (
                  <Loader />
                )
              ) : (
                <Loader />
              )}
            </span>
          </h2>
          <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_credit.length !== 0 ? (
                    [...user.online_credit].reverse().map((el, i) => {
                      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>
                      );
                    })
                  ) : user ? (
                    user.online_card.length !== 0 ? (
                      ""
                    ) : (
                      <tr>
                        <td>
                          {locale === "TKM"
                            ? "Tabşyrlan ýüzlenme ýok"
                            : locale === "РУС"
                            ? "Заявок нет"
                            : locale === "ENG"
                            ? "There are no applications"
                            : "Tabşyrlan ýüzlenme ýok"}
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                      </tr>
                    )
                  ) : null
                ) : user ? (
                  user.online_card.length !== 0 ? (
                    ""
                  ) : (
                    <tr>
                      <td>
                        {locale === "TKM"
                          ? "Tabşyrlan ýüzlenme ýok"
                          : locale === "РУС"
                          ? "Заявок нет"
                          : locale === "ENG"
                          ? "There are no applications"
                          : "Tabşyrlan ýüzlenme ýok"}
                      </td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                  )
                ) : null}
                {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.selected_card}</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"
                                    : "Отправлено"
                                  : el.status === "kabul_edildi"
                                  ? locale === "TKM"
                                    ? "Kabul edildi"
                                    : "Принята"
                                  : el.status === "seredilyar"
                                  ? locale === "TKM"
                                    ? "Görülyar"
                                    : "На стадии рассмотрения"
                                  : el.status === "kart_chykaryldy"
                                  ? locale === "TKM"
                                    ? "Kart çykaryldy"
                                    : "Карта выпущена"
                                  : el.status === "kart_chykarylmady"
                                  ? locale === "TKM"
                                    ? "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>
                          );
                        }
                      })
                    : null
                  : null}
                {/* {user
                  ? user.account_replenishment.length !== 0
                    ? user.account_replenishment.map((el, i) => {
                        // if (el.payed) {
                        return (
                          <tr key={i}>
                            <td>#{el.id}</td>
                            <td>{el.selected_type_account_replenishment}</td>
                            <td>
                              {el.created_at
                                .split(" ")[0]
                                .replace("-", ".")
                                .replace("-", ".")}
                            </td>
                            <td
                              className={
                                el.status === "kart_chykarylmady"
                                  ? "red"
                                  : el.status === "kart_chykaryldy" ||
                                    el.status === "kabul_edildi"
                                  ? "green"
                                  : ""
                              }
                            >
                              {el.status === "ugradyldy"
                                ? locale === "TKM"
                                  ? "Ugradyldy"
                                  : "Отправлено"
                                : el.status === "kabul_edildi"
                                ? locale === "TKM"
                                  ? "Kabul edildi"
                                  : "Принята"
                                : el.status === "seredilyar"
                                ? locale === "TKM"
                                  ? "Görülyar"
                                  : "На стадии рассмотрения"
                                : el.status === "kart_chykaryldy"
                                ? locale === "TKM"
                                  ? "Kart çykaryldy"
                                  : "Карта выпущена"
                                : el.status === "kart_chykarylmady"
                                ? locale === "TKM"
                                  ? "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>
                        );
                      })
                    : null
                  : null} */}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Base;
