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

import axios from 'axios';

// IMPORT IMAGES
import exit from '../../icons/exit.svg';
import { ReactComponent as Lines } from '../../icons/lines.svg';
import { ReactComponent as Img1 } from '../../icons/credit1.svg';
import { ReactComponent as Img2 } from '../../icons/credit2.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 BorrowerStage from '../ImmediateCreditsStages/BorrowerStage';
import BorrowerInfo from '../ImmediateCreditsStages/BorrowerInfo';
import GuaranterStage from '../ImmediateCreditsStages/GuaranterStage';
import GuaranterInfo from '../ImmediateCreditsStages/GuaranterInfo';
import NotAUser from '../ImmediateCreditsStages/NotAUser';
import CalculateStage from '../ImmediateCreditsStages/CalculateStage';
import AcceptStage from '../ImmediateCreditsStages/AcceptStage';
import PhoneAccept from '../ImmediateCreditsStages/PhoneAccept';
import CardDetails from '../ImmediateCreditsStages/CardDetails';
import LoanAccepted from '../ImmediateCreditsStages/LoanAccepted';
import CardRegistration from '../ImmediateCreditsStages/CardRegistration';
import PaymentDetails from '../ImmediateCreditsStages/PaymentDetails';
import PaymentSuccess from '../ImmediateCreditsStages/PaymentSuccess';
import FinalStage from '../ImmediateCreditsStages/FinalStage';
import { UserContext } from '../../backend/UserContext';

const ImmediateCreditModal = ({
  modalOpen,
  setModalOpen,
  stage,
  setStage,
  setLoader,
  setSuccess,
  // setError,
  setProgress,
}) => {
  const { locale } = useContext(LanguageContext);
  const { user } = useContext(UserContext);

  const window = useRef();
  const [isGuranter, setIsGuranter] = useState(false);

  const [loading, setLoading] = useState();
  const [error, setError] = useState();

  const [errMessage, setErrMessage] = useState('');
  const [errMessageEn, setErrMessageEn] = useState('');
  const [errMessageTkm, setErrMessageTkm] = useState('');

  const [acceptedMessage, setAcceptedMessage] = useState('');
  const [acceptedMessageEn, setAcceptedMessageEn] = useState('');
  const [acceptedMessageTkm, setAcceptedMessageTkm] = useState('');

  const [borrowerData, setBorrowerData] = useState();
  const [guaranterData, setGuaranterData] = useState();

  const [signRecipient, setSignRecipient] = useState();
  const [sighGuaranter, setSignGuaranter] = useState();
  const [maxAmount, setMaxAmount] = useState();
  const [recepientAmount, setRecepientAmount] = useState(0);
  const [creditDuration, setCreditDuration] = useState(0);
  const [phoneNumber, setPhoneNumber] = useState('');
  const [cardDetails, setCardDetails] = useState('');

  const [userDataRes, setUserDataRes] = useState();
  const [paymentLink, setPaymentLink] = useState('');

  const [paymentDetails, setPaymentDetails] = useState();
  const [submitCardDetails, setSumbitCardDetails] = useState();

  const [recipientWorkPlace, setRecipientWorkPlace] = useState('');
  const [recipientWorkPosition, setRecipientWorkPosition] = useState('');

  const [invalidData, setInvalidData] = useState(false);

  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'
                  ? 'Sanly karz almak üçin onlaýn-ýüzlenme'
                  : locale === 'ENG'
                  ? 'Online aplication for digital loan'
                  : 'Онлайн-заявка для получения цифрового кредита'}
              </h2>
              <button
                type="button"
                className="exit-btn"
                onClick={() => {
                  setModalOpen(false);
                }}>
                <div>
                  <img src={exit} alt="exit" />
                </div>
              </button>
            </div>

            <div className="modal-middle modal-middle-digital-loan">
              <div className="icon-block active">
                <Img4 className="modal-icon" />
                <h3 className="icon-title">
                  {locale === 'TKM'
                    ? 'Maglumatlary dolduryň'
                    : locale === 'РУС'
                    ? 'Заполните данные'
                    : locale === 'ENG'
                    ? 'Fill in the details'
                    : 'Maglumatlary dolduryň'}
                </h3>
              </div>

              <div className={stage > 1 ? 'line-block active' : 'line-block'}>
                <Lines className="lines" />
              </div>

              <div className={stage > 1 ? 'icon-block active' : 'icon-block'}>
                <Img3 className="modal-icon" />
                <h3 className="icon-title">
                  {locale === 'TKM'
                    ? 'Şahsy maglumatlaryňyzy tassyklaň'
                    : locale === 'РУС'
                    ? 'Подтвердите личные данные'
                    : locale === 'ENG'
                    ? 'Confirm your Personal data'
                    : 'Şahsy maglumatlaryňyzy tassyklaň'}
                </h3>
              </div>

              <div className={stage > 1 ? 'line-block active' : 'line-block'}>
                <Lines className="lines" />
              </div>

              {isGuranter && (
                <>
                  <div className={stage > 3 ? 'icon-block active' : 'icon-block'}>
                    <Img4 className="modal-icon" />
                    <h3 className="icon-title">
                      {locale === 'TKM'
                        ? 'Zamunçynyň maglumatlaryny dolduryň'
                        : locale === 'РУС'
                        ? 'Заполните данные поручителя'
                        : locale === 'ENG'
                        ? "Fill in the guarantor's details"
                        : 'Zamunçynyň maglumatlaryny dolduryň'}
                    </h3>
                  </div>

                  <div className={stage > 3 ? 'line-block active' : 'line-block'}>
                    <Lines className="lines" />
                  </div>

                  <div className={stage > 4 ? 'icon-block active' : 'icon-block'}>
                    <Img3 className="modal-icon" />
                    <h3 className="icon-title">
                      {locale === 'TKM'
                        ? 'Zamunçynyň maglumatlaryny tassyklaň'
                        : locale === 'РУС'
                        ? 'Подтвердите данные поручителя'
                        : locale === 'ENG'
                        ? "Confirm the guarantor's details"
                        : 'Zamunçynyň maglumatlaryny tassyklaň'}
                    </h3>
                  </div>

                  <div className={stage > 3 ? 'line-block active' : 'line-block'}>
                    <Lines className="lines" />
                  </div>

                  <div className={stage > 8 ? 'icon-block active' : 'icon-block'}>
                    <Img5 className="modal-icon" />
                    <h3 className="icon-title">
                      {locale === 'TKM'
                        ? 'Karz ýüzlenmesini tassyklaň'
                        : locale === 'РУС'
                        ? 'Подтвердите кредитную заявку'
                        : locale === 'ENG'
                        ? 'Confirm your loan application'
                        : 'Karz ýüzlenmesini tassyklaň'}
                    </h3>
                  </div>

                  <div className={stage > 8 ? 'line-block active' : 'line-block'}>
                    <Lines className="lines" />
                  </div>
                </>
              )}

              <div className={stage > 6 ? 'icon-block active' : 'icon-block'}>
                <Img2 className="modal-icon" />
                <h3 className="icon-title">
                  {locale === 'TKM'
                    ? 'Karz kalkulýatory'
                    : locale === 'РУС'
                    ? 'Калькулятор кредита'
                    : locale === 'ENG'
                    ? 'Loan calculator'
                    : 'Karz kalkulýatory'}
                </h3>
              </div>

              <div className={stage > 6 ? 'line-block active' : 'line-block'}>
                <Lines className="lines" />
              </div>

              <div className={stage > 7 ? 'icon-block active' : 'icon-block'}>
                <Img6 className="modal-icon" />
                <h3 className="icon-title">
                  {locale === 'TKM'
                    ? 'Karz maglumatlaryňyzy tassyklaň'
                    : locale === 'РУС'
                    ? 'Подтвердите данные кредита'
                    : locale === 'ENG'
                    ? 'Confirm your loan personal data'
                    : 'Karz maglumatlaryňyzy tassyklaň'}
                </h3>
              </div>

              <div className={stage > 7 ? 'line-block active' : 'line-block'}>
                <Lines className="lines" />
              </div>

              <div className={stage > 8 ? 'icon-block active' : 'icon-block'}>
                <Img5 className="modal-icon" />
                <h3 className="icon-title">
                  {locale === 'TKM'
                    ? 'Karz ýüzlenmesini tassyklaň'
                    : locale === 'РУС'
                    ? 'Подтвердите кредитную заявку'
                    : locale === 'ENG'
                    ? 'Confirm your loan application'
                    : 'Karz ýüzlenmesini tassyklaň'}
                </h3>
              </div>
            </div>

            <div className="modal-middle modal-middle-mobile">
              {stage === 1 && (
                <div className="icon-block active">
                  <Img4 className="modal-icon" />
                  <h3 className="icon-title">
                    {locale === 'TKM'
                      ? 'Maglumatlary dolduryň'
                      : locale === 'РУС'
                      ? 'Заполните данные'
                      : locale === 'ENG'
                      ? 'Fill in the details'
                      : 'Maglumatlary dolduryň'}
                  </h3>
                </div>
              )}

              {stage === 2 && (
                <div className="icon-block active">
                  <Img3 className="modal-icon" />
                  <h3 className="icon-title">
                    {locale === 'TKM'
                      ? 'Şahsy maglumatlaryňyzy tassyklaň'
                      : locale === 'РУС'
                      ? 'Подтвердите личные данные'
                      : locale === 'ENG'
                      ? 'Confirm your Personal data'
                      : 'Şahsy maglumatlaryňyzy tassyklaň'}
                  </h3>
                </div>
              )}

              {isGuranter && (
                <>
                  {stage === 4 && (
                    <div className="icon-block active">
                      <Img4 className="modal-icon" />
                      <h3 className="icon-title">
                        {locale === 'TKM'
                          ? 'Zamunçynyň maglumatlaryny dolduryň'
                          : locale === 'РУС'
                          ? 'Заполните данные поручителя'
                          : locale === 'ENG'
                          ? "Fill in the guarantor's details"
                          : 'Zamunçynyň maglumatlaryny dolduryň'}
                      </h3>
                    </div>
                  )}
                  {stage === 5 && (
                    <div className="icon-block active">
                      <Img3 className="modal-icon" />
                      <h3 className="icon-title">
                        {locale === 'TKM'
                          ? 'Zamunçynyň maglumatlaryny tassyklaň'
                          : locale === 'РУС'
                          ? 'Подтвердите данные поручителя'
                          : locale === 'ENG'
                          ? "Confirm the guarantor's details"
                          : 'Zamunçynyň maglumatlaryny tassyklaň'}
                      </h3>
                    </div>
                  )}
                </>
              )}

              {stage === 6 && (
                <div className="icon-block active">
                  <Img2 className="modal-icon" />
                  <h3 className="icon-title">
                    {locale === 'TKM'
                      ? 'Karz kalkulýatory'
                      : locale === 'РУС'
                      ? 'Калькулятор кредита'
                      : locale === 'ENG'
                      ? 'Loan calculator'
                      : 'Karz kalkulýatory'}
                  </h3>
                </div>
              )}

              {stage === 7 && (
                <div className="icon-block active">
                  <Img6 className="modal-icon" />
                  <h3 className="icon-title">
                    {locale === 'TKM'
                      ? 'Karz maglumatlaryňyzy tassyklaň'
                      : locale === 'РУС'
                      ? 'Подтвердите данные кредита'
                      : locale === 'ENG'
                      ? 'Confirm your loan details'
                      : 'Karz maglumatlaryňyzy tassyklaň'}
                  </h3>
                </div>
              )}
              {stage === 8 && (
                <div className="icon-block active">
                  <Img5 className="modal-icon" />
                  <h3 className="icon-title">
                    {locale === 'TKM'
                      ? 'Karz ýüzlenmesini tassyklaň'
                      : locale === 'РУС'
                      ? 'Подтвердите кредитную заявку'
                      : locale === 'ENG'
                      ? 'Confirm your loan application'
                      : 'Karz ýüzlenmesini tassyklaň'}
                  </h3>
                </div>
              )}

              {/* {stage === 1 ? (
                <>
                  <div className="icon-block active">
                    <Img4 className="modal-icon" />
                    <h3 className="icon-title">
                      {locale === 'TKM'
                        ? 'Maglumatlary dolduryň'
                        : locale === 'РУС'
                        ? 'Заполните данные'
                        : locale === 'ENG'
                        ? 'Fill in the details'
                        : 'Maglumatlary dolduryň'}
                    </h3>
                  </div>
                </>
              ) : stage === 2 ? (
                <div className="icon-block active">
                  <Img3 className="modal-icon" />
                  <h3 className="icon-title">
                    {locale === 'TKM'
                      ? 'Şahsy maglumatlaryňyzy tassyklaň'
                      : locale === 'РУС'
                      ? 'Подтвердите личные данные'
                      : locale === 'ENG'
                      ? 'Confirm your Personal data'
                      : 'Şahsy maglumatlaryňyzy tassyklaň'}
                  </h3>
                </div>
              ) : stage === 4 ? (
                <div className="icon-block active">
                  <Img4 className="modal-icon" />
                  <h3 className="icon-title">
                    {locale === 'TKM'
                      ? 'Zamunçynyň maglumatlaryny dolduryň'
                      : locale === 'РУС'
                      ? 'Заполните данные поручителя'
                      : locale === 'ENG'
                      ? "Fill in the guarantor's details"
                      : 'Zamunçynyň maglumatlaryny dolduryň'}
                  </h3>
                </div>
              ) : stage === 5 ? (
                <div className="icon-block active">
                  <Img3 className="modal-icon" />
                  <h3 className="icon-title">
                    {locale === 'TKM'
                      ? 'Zamunçynyň maglumatlaryny tassyklaň'
                      : locale === 'РУС'
                      ? 'Подтвердите данные поручителя'
                      : locale === 'ENG'
                      ? "Confirm the guarantor's details"
                      : 'Zamunçynyň maglumatlaryny tassyklaň'}
                  </h3>
                </div>
              ) : (
                ''
              )} */}
            </div>

            <div className="modal-bottom">
              {stage === 1 ? (
                <BorrowerStage
                  modalOpen={modalOpen}
                  stage={stage}
                  setStage={setStage}
                  isGuranter={isGuranter}
                  setIsGuranter={setIsGuranter}
                  setBorrowerData={setBorrowerData}
                  borrowerData={borrowerData}
                  setSignRecipient={setSignRecipient}
                  setMaxAmount={setMaxAmount}
                  setRecepientAmount={setRecepientAmount}
                  setErrMessage={setErrMessage}
                  setErrMessageEn={setErrMessageEn}
                  setErrMessageTkm={setErrMessageTkm}
                />
              ) : stage === 2 ? (
                <BorrowerInfo
                  setStage={setStage}
                  isGuranter={isGuranter}
                  borrowerData={borrowerData}
                  setRecipientWorkPlace={setRecipientWorkPlace}
                  setRecipientWorkPosition={setRecipientWorkPosition}
                  recipientWorkPlace={recipientWorkPlace}
                  recipientWorkPosition={recipientWorkPosition}
                />
              ) : stage === 3 ? (
                <NotAUser
                  setStage={setStage}
                  stage={stage}
                  errMessage={errMessage}
                  errMessageEn={errMessageEn}
                  errMessageTkm={errMessageTkm}
                />
              ) : stage === 4 ? (
                <GuaranterStage
                  setStage={setStage}
                  isGuranter={isGuranter}
                  setIsGuranter={setIsGuranter}
                  guaranterData={guaranterData}
                  setGuaranterData={setGuaranterData}
                  signRecipient={signRecipient}
                  setSignGuaranter={setSignGuaranter}
                  borrowerData={borrowerData}
                  setErrMessage={setErrMessage}
                  setErrMessageEn={setErrMessageEn}
                  setErrMessageTkm={setErrMessageTkm}
                />
              ) : stage === 5 ? (
                <GuaranterInfo
                  setStage={setStage}
                  isGuranter={isGuranter}
                  guaranterData={guaranterData}
                />
              ) : stage === 6 ? (
                <NotAUser
                  setStage={setStage}
                  stage={stage}
                  errMessage={errMessage}
                  errMessageEn={errMessageEn}
                  errMessageTkm={errMessageTkm}
                />
              ) : stage === 7 ? (
                <CalculateStage
                  isGuranter={isGuranter}
                  setStage={setStage}
                  recepientAmount={recepientAmount}
                  setRecepientAmount={setRecepientAmount}
                  creditDuration={creditDuration}
                  setCreditDuration={setCreditDuration}
                  maxAmount={maxAmount}
                  modalOpen={modalOpen}
                />
              ) : stage === 8 ? (
                <AcceptStage
                  setStage={setStage}
                  recepientAmount={recepientAmount}
                  creditDuration={creditDuration}
                  setPhoneNumber={setPhoneNumber}
                  phoneNumber={phoneNumber}
                  setCardDetails={setCardDetails}
                  cardDetails={cardDetails}
                  borrowerData={borrowerData}
                  guaranterData={guaranterData}
                  isGuranter={isGuranter}
                  setUserDataRes={setUserDataRes}
                  userDataRes={userDataRes}
                  setErrMessage={setErrMessage}
                  setErrMessageEn={setErrMessageEn}
                  setErrMessageTkm={setErrMessageTkm}
                />
              ) : stage === 9 ? (
                <PhoneAccept
                  setStage={setStage}
                  borrowerData={borrowerData}
                  guaranterData={guaranterData}
                  cardDetails={cardDetails}
                  recepientAmount={recepientAmount}
                  creditDuration={creditDuration}
                  setAcceptedMessage={setAcceptedMessage}
                  recipientWorkPlace={recipientWorkPlace}
                  recipientWorkPosition={recipientWorkPosition}
                />
              ) : stage === 10 ? (
                <NotAUser
                  setStage={setStage}
                  stage={stage}
                  errMessage={errMessage}
                  errMessageEn={errMessageEn}
                  errMessageTkm={errMessageTkm}
                />
              ) : stage === 11 ? (
                <LoanAccepted
                  setModalOpen={setModalOpen}
                  setStage={setStage}
                  stage={stage}
                  acceptedMessage={acceptedMessage}
                />
              ) : stage === 12 ? (
                <CardRegistration
                  setStage={setStage}
                  stage={stage}
                  borrowerData={borrowerData}
                  setPaymentLink={setPaymentLink}
                  paymentLink={paymentLink}
                  setPaymentDetails={setPaymentDetails}
                  invalidData={invalidData}
                />
              ) : stage === 13 ? (
                <PaymentDetails
                  setStage={setStage}
                  paymentLink={paymentLink}
                  paymentDetails={paymentDetails}
                  borrowerData={borrowerData}
                  setSumbitCardDetails={setSumbitCardDetails}
                  setInvalidData={setInvalidData}
                />
              ) : stage === 14 ? (
                <PhoneAccept
                  borrowerData={borrowerData}
                  setStage={setStage}
                  paymentDetails={paymentDetails}
                  submitCardDetails={submitCardDetails}
                  paymentLink={paymentLink}
                  creditDuration={creditDuration}
                  recepientAmount={recepientAmount}
                />
              ) : stage === 15 ? (
                <PaymentSuccess
                  setStage={setStage}
                  setModalOpen={setModalOpen}
                  borrowerData={borrowerData}
                  guaranterData={guaranterData}
                  isGuranter={isGuranter}
                  cardDetails={cardDetails}
                  recepientAmount={recepientAmount}
                  creditDuration={creditDuration}
                  setErrMessage={setErrMessage}
                  setAcceptedMessage={setAcceptedMessage}
                  setAcceptedMessageEn={setAcceptedMessageEn}
                  setAcceptedMessageTkm={setAcceptedMessageTkm}
                />
              ) : stage === 16 ? (
                <FinalStage
                  setModalOpen={setModalOpen}
                  acceptedMessage={acceptedMessage}
                  acceptedMessageEn={acceptedMessageEn}
                  acceptedMessageTkm={acceptedMessageTkm}
                />
              ) : (
                ''
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ImmediateCreditModal;
