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

// IMPORT IMAGES
import exit from "../../icons/exit.svg";
import { ReactComponent as Lines } from "../../icons/lines.svg";
import { ReactComponent as Img1 } from "../../icons/topup1.svg";
import { ReactComponent as Img3 } from "../../icons/credit3.svg";
import { ReactComponent as Img4 } from "../../icons/credit4.svg";
import { ReactComponent as Img5 } from "../../icons/credit5.svg";
import { ReactComponent as Img6 } from "../../icons/credit6.svg";

// IMPORT COMPONENTS
import TopupStage1 from "../TopupStages/TopupStage1";
import TopupStage2 from "../TopupStages/TopupStage2";
import TopupStage3 from "../TopupStages/TopupStage3";
import TopupStage4 from "../TopupStages/TopupStage4";
import TopupStage5 from "../TopupStages/TopupStage5";

const TopupModal = ({
  modalOpen,
  setModalOpen,
  stage,
  setStage,
  setLoader,
  setSuccess,
  setError,
  topupData,
  setProgress,
}) => {
  const { locale } = useContext(LanguageContext);
  const window = useRef();
  const [data, setData] = useState({});
  const [id, setId] = useState(1);
  return (
    <section
      className={modalOpen ? "modal credit-modal active" : "modal credit-modal"}
    >
      <div className="modal-container">
        <div className="modal-inner" ref={window}>
          <div className="modal-window">
            <div className="modal-top">
              <h2>
                {locale === "TKM"
                  ? "Hasaby doldurmak üçin onlaýn-ýüzlenme"
                  : locale === "РУС"
                  ? "Онлайн-заявка для пополнения счета"
                  : locale === "ENG"
                  ? "Online application for account top up"
                  : "Hasaby doldurmak üçin onlaýn-ýüzlenme"}
              </h2>
              <button
                type="button"
                className="exit-btn"
                onClick={() => {
                  setModalOpen(false);
                }}
              >
                <div>
                  <img src={exit} alt="exit" />
                </div>
              </button>
            </div>
            <div className="modal-middle topup-modal-middle">
              <div className="icon-block active">
                <Img1 className="modal-icon" />
                <h3 className="icon-title">
                  {locale === "TKM"
                    ? "Hyzmatynyň görnüşini saýlamak"
                    : locale === "РУС"
                    ? "Выберите вид пополнения счета"
                    : locale === "ENG"
                    ? "Choose the type of top up"
                    : "Hyzmatynyň görnüşini saýlamak"}
                </h3>
              </div>
              <div className={stage > 1 ? "line-block active" : "line-block"}>
                <Lines className="lines" />
                <Lines className="lines" />
              </div>
              <div className={stage > 1 ? "icon-block active" : "icon-block"}>
                <Img3 className="modal-icon" />
                <h3 className="icon-title">
                  {locale === "TKM"
                    ? "Şahsy maglumatlar"
                    : locale === "РУС"
                    ? "Личные данные"
                    : locale === "ENG"
                    ? "Personal data"
                    : "Şahsy maglumatlar"}
                </h3>
              </div>
              <div className={stage > 2 ? "line-block active" : "line-block"}>
                <Lines className="lines" />
                <Lines className="lines" />
              </div>

              <div className={stage > 2 ? "icon-block active" : "icon-block"}>
                <Img4 className="modal-icon" />
                <h3 className="icon-title">
                  {locale === "TKM"
                    ? "Şahamçany saýlamak"
                    : locale === "РУС"
                    ? "Данные для пополнения счета"
                    : locale === "ENG"
                    ? "Top up data"
                    : "Şahamçany saýlamak"}
                </h3>
              </div>
              <div className={stage > 3 ? "line-block active" : "line-block"}>
                <Lines className="lines" />
                <Lines className="lines" />
              </div>
              <div className={stage > 3 ? "icon-block active" : "icon-block"}>
                <Img5 className="modal-icon" />
                <h3 className="icon-title">
                  {locale === "TKM"
                    ? "Gerekli resminamalary"
                    : locale === "РУС"
                    ? "Требования и документы"
                    : locale === "ENG"
                    ? "Requirements and documents"
                    : "Gerekli resminamalary"}
                </h3>
              </div>
              <div className={stage > 4 ? "line-block active" : "line-block"}>
                <Lines className="lines" />
                <Lines className="lines" />
              </div>
              <div className={stage > 4 ? "icon-block active" : "icon-block"}>
                <Img6 className="modal-icon" />
                <h3 className="icon-title">
                  {locale === "TKM"
                    ? "Ugratmak"
                    : locale === "РУС"
                    ? "Отправка"
                    : locale === "ENG"
                    ? "Sending"
                    : "Ugratmak"}
                </h3>
              </div>
            </div>
            <div className="modal-middle modal-middle-mobile">
              {stage === 1 ? (
                <div className="icon-block active">
                  <Img1 className="modal-icon" />
                  <h3 className="icon-title">
                    {locale === "TKM"
                      ? "Hyzmatynyň görnüşini saýlamak"
                      : locale === "РУС"
                      ? "Выберите вид пополнения счета"
                      : locale === "ENG"
                      ? "Choose the type of top up"
                      : "Hyzmatynyň görnüşini saýlamak"}
                  </h3>
                </div>
              ) : stage === 2 ? (
                <div className="icon-block active">
                  <Img3 className="modal-icon" />
                  <h3 className="icon-title">
                    {locale === "TKM"
                      ? "Şahsy maglumatlar"
                      : locale === "РУС"
                      ? "Личные данные"
                      : locale === "ENG"
                      ? "Personal data"
                      : "Şahsy maglumatlar"}
                  </h3>
                </div>
              ) : stage === 3 ? (
                <div className="icon-block active">
                  <Img4 className="modal-icon" />
                  <h3 className="icon-title">
                    {locale === "TKM"
                      ? "Şahamçany saýlamak"
                      : locale === "РУС"
                      ? "Данные для пополнения счета"
                      : locale === "ENG"
                      ? "Loan details"
                      : "Şahamçany saýlamak"}
                  </h3>
                </div>
              ) : stage === 4 ? (
                <div className="icon-block active">
                  <Img5 className="modal-icon" />
                  <h3 className="icon-title">
                    {locale === "TKM"
                      ? "Gerekli resminamalary"
                      : locale === "РУС"
                      ? "Требования и документы"
                      : locale === "ENG"
                      ? "Requirements and documents"
                      : "Gerekli resminamalary"}
                  </h3>
                </div>
              ) : stage === 5 ? (
                <div className="icon-block active">
                  <Img6 className="modal-icon" />
                  <h3 className="icon-title">
                    {locale === "TKM"
                      ? "Ugratmak"
                      : locale === "РУС"
                      ? "Отправка"
                      : locale === "ENG"
                      ? "Sending"
                      : "Ugratmak"}
                  </h3>
                </div>
              ) : (
                ""
              )}
            </div>
            <div className="modal-bottom">
              {stage === 1 ? (
                <TopupStage1
                  setStage={setStage}
                  data={data}
                  setData={setData}
                  topupData={topupData}
                  id={id}
                  setId={setId}
                />
              ) : stage === 2 ? (
                <TopupStage2
                  setStage={setStage}
                  data={data}
                  setData={setData}
                  topupData={topupData}
                  id={id}
                />
              ) : stage === 3 ? (
                <TopupStage3
                  setStage={setStage}
                  data={data}
                  setData={setData}
                />
              ) : stage === 4 ? (
                <TopupStage4
                  setStage={setStage}
                  data={data}
                  setData={setData}
                  topupData={topupData}
                  id={id}
                />
              ) : stage === 5 ? (
                <TopupStage5
                  data={data}
                  setModalOpen={setModalOpen}
                  setLoader={setLoader}
                  setSuccess={setSuccess}
                  setError={setError}
                  setProgress={setProgress}
                  setStage={setStage}
                />
              ) : (
                ""
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default TopupModal;
