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

// IMPORT IMAGES
import minus from '../../icons/minus.svg';
import plus from '../../icons/plus.svg';
import next from '../../icons/next.svg';
import logo from '../../icons/logo-transp.svg';

// IMPORT IMAGES
import next_reverse from '../../icons/next-reverse.svg';

const CalculateStage = ({
  setStage,
  isGuranter,
  recepientAmount,
  setRecepientAmount,
  setCreditDuration,
  maxAmount,
  creditDuration,
  modalOpen,
}) => {
  const { locale } = useContext(LanguageContext);
  const [max, setMax] = useState(maxAmount);
  const [bet, setBet] = useState(12);
  const [inputValue, setInputValue] = useState(recepientAmount);
  const [radio, setRadio] = useState(creditDuration !== 0 ? 1 : creditDuration);
  const [monthlyPayment, setMonthlyPayment] = useState(
    (inputValue / (radio * 12) + (inputValue / (radio * 12)) * (bet / 100)).toFixed(2),
  );

  useEffect(() => {
    setMonthlyPayment(
      (inputValue / (radio * 12) + ((inputValue * (bet / 100)) / 365) * 30).toFixed(2),
    );

    setRecepientAmount(inputValue);
    setCreditDuration(radio);
  }, [inputValue, radio]);

  useEffect(() => {
    setInputValue(recepientAmount);
  }, [recepientAmount]);

  useEffect(() => {
    input.current.value = inputValue;
  }, [inputValue]);

  useEffect(() => {
    setCreditDuration(0);
    setRadio(0);
  }, [modalOpen]);

  // useEffect(() => {
  //   if (creditData) {
  //     creditData.data.map((el) => {
  //       if (el.id === id) {
  //         setBet(el.bet);
  //         setMax(el.sum);
  //       }
  //     });
  //   }
  // }, [creditData]);

  const input = useRef();

  return (
    <section className="cs-2">
      <form>
        <div className="cs-2-left">
          <div className="calculate-header">
            <h2 className="cs-2-title">
              {locale === 'TKM'
                ? 'Karzyň gerekli möçberini saýlaň'
                : locale === 'РУС'
                ? 'Выберите необходимую сумму кредита'
                : locale === 'ENG'
                ? 'Select the required loan amount'
                : 'Karzyň gerekli möçberini saýlaň'}
            </h2>

            {/* <p>Максимальная сумма онлайн потребительского кредита составляет 60000 манат</p> */}
          </div>
          <div className="input-block">
            <label htmlFor="sum">
              {locale === 'TKM'
                ? 'Karzyň möçberi'
                : locale === 'РУС'
                ? 'Сумма кредита'
                : locale === 'ENG'
                ? 'Amount of loan'
                : 'Karzyň möçberi'}
            </label>
            <div className="cs-2-input">
              <div className="input-data">
                <div
                  className="data-img"
                  onClick={() => {
                    input.current.stepDown(1);
                    setInputValue(input.current.value);
                  }}>
                  <img src={minus} alt="minus" />
                </div>
                <h6>{Math.ceil(inputValue)}</h6>
                <div
                  className={`data-img ${inputValue === max ? 'data-img-disabled' : ''}`}
                  onClick={() => {
                    input.current.stepUp(1);
                    setInputValue(input.current.value);
                  }}>
                  <img src={plus} alt="plus" />
                </div>
              </div>
              <input
                type="range"
                id="sum"
                min="100"
                max={max}
                defaultValue={inputValue}
                ref={input}
                onChange={(e) => {
                  setInputValue(e.target.value);
                }}
              />
            </div>
          </div>
          <div className="credit-term input-block">
            <label>
              {locale === 'TKM'
                ? 'Karzyň möhletini saýlaň'
                : locale === 'РУС'
                ? 'Выберите срок кредита'
                : locale === 'ENG'
                ? 'Select term of loan'
                : 'Karzyň möhletini saýlaň'}
            </label>
            <div className="term-inputs">
              <label htmlFor="term2" className={radio === 1 ? 'active' : ''}>
                1{' '}
                {locale === 'TKM'
                  ? 'ýyl'
                  : locale === 'РУС'
                  ? 'год'
                  : locale === 'ENG'
                  ? 'year'
                  : 'ýyl'}
                <input
                  type="radio"
                  name="term"
                  id="term2"
                  onClick={(e) => {
                    if (e.target.checked === true) {
                      setRadio(1);
                    }
                  }}
                />
              </label>
              <label htmlFor="term3" className={radio === 2 ? 'active' : ''}>
                2{' '}
                {locale === 'TKM'
                  ? 'ýyl'
                  : locale === 'РУС'
                  ? 'год'
                  : locale === 'ENG'
                  ? 'years'
                  : 'ýyl'}
                <input
                  type="radio"
                  name="term"
                  id="term3"
                  onClick={(e) => {
                    if (e.target.checked === true) {
                      setRadio(2);
                    }
                  }}
                />
              </label>
              <label htmlFor="term4" className={radio === 3 ? 'active' : ''}>
                3{' '}
                {locale === 'TKM'
                  ? 'ýyl'
                  : locale === 'РУС'
                  ? 'год'
                  : locale === 'ENG'
                  ? 'years'
                  : 'ýyl'}
                <input
                  type="radio"
                  name="term"
                  id="term4"
                  onClick={(e) => {
                    if (e.target.checked === true) {
                      setRadio(3);
                    }
                  }}
                />
              </label>
            </div>
          </div>
          <div className="card-button cs-2-bottom">
            <button
              type="button"
              className="sign-btn reg-btn"
              onClick={() => {
                isGuranter ? setStage(5) : setStage(2);
              }}>
              <div>
                <div className="btn-img">
                  <img src={next_reverse} alt="logout" />
                </div>
                <h3>
                  {locale === 'TKM'
                    ? 'Yza'
                    : locale === 'РУС'
                    ? 'Назад'
                    : locale === 'ENG'
                    ? 'Back'
                    : 'Yza'}
                </h3>
              </div>
            </button>
            <button
              type="button"
              disabled={creditDuration === 0 ? true : false}
              className="sign-btn cd-btn"
              onClick={() => {
                setStage(8);
              }}>
              <div>
                <h3>
                  {locale === 'TKM'
                    ? 'Dowam et'
                    : locale === 'РУС'
                    ? 'Продолжить'
                    : locale === 'ENG'
                    ? 'Proceed'
                    : 'Dowam et'}
                </h3>
                <div className="btn-img">
                  <img src={next} alt="logout" />
                </div>
              </div>
            </button>
          </div>
        </div>
        <div className="cs-2-right">
          <div className="cs-2-right-inner">
            <div className="abs-img">
              <img src={logo} alt="logo" />
            </div>
            <div className="cs-2-right-top">
              <h4 className="calculator-hader">
                {locale === 'TKM'
                  ? 'Karzyň kalkulýatory'
                  : locale === 'РУС'
                  ? 'Калькулятор кредита'
                  : locale === 'ENG'
                  ? 'Loan calculator'
                  : 'Karzyň kalkulýatory'}
              </h4>
              <h6>
                {locale === 'TKM'
                  ? 'Her aý tölegi'
                  : locale === 'РУС'
                  ? 'Ежемесячный платеж'
                  : locale === 'ENG'
                  ? 'Monthly payment'
                  : 'Her aý tölegi'}
                :
              </h6>
              <div className="payment">
                <h5>{creditDuration === 0 ? 0 : monthlyPayment} TMT</h5>
              </div>
              <div className="percent">
                <h6>
                  {locale === 'TKM'
                    ? 'Göterim töleg'
                    : locale === 'РУС'
                    ? 'Процентная ставка'
                    : locale === 'ENG'
                    ? 'Interest rate'
                    : 'Göterim töleg'}
                  :
                </h6>
                <h5>{creditDuration === 0 ? 0 : bet} %</h5>
              </div>
            </div>
            <div className="cs-2-right-middle">
              <div className="cs-2-right-middle-content">
                <h6>
                  {locale === 'TKM'
                    ? 'Pul ýygymy'
                    : locale === 'РУС'
                    ? 'Процентный платеж'
                    : locale === 'ENG'
                    ? 'Interest payment'
                    : 'UgrPul ýygymyatmak'}
                  :
                </h6>
                <h5>
                  {creditDuration === 0 ? 0 : (((inputValue * (bet / 100)) / 365) * 30).toFixed(2)}
                  TMT
                </h5>
              </div>
              <div className="cs-2-right-middle-content">
                <h6>
                  {locale === 'TKM'
                    ? 'Karzyň esasy bergisiniň töleg möçberi'
                    : locale === 'РУС'
                    ? 'Платеж для погашения основной суммы'
                    : locale === 'ENG'
                    ? 'Principal payment'
                    : 'Karzyň esasy bergisiniň töleg möçberi'}
                  :
                </h6>
                <h5>{creditDuration === 0 ? 0 : (inputValue / (radio * 12)).toFixed(2)} TMT</h5>
              </div>
            </div>
            <div className="cs-2-right-middle-content">
              <h6>
                {locale === 'TKM'
                  ? 'Karz almak üçin bolmaly aýlyk zähmet haky'
                  : locale === 'РУС'
                  ? 'Необходимая заработная плата для кредита'
                  : locale === 'ENG'
                  ? 'Required salary for a loan'
                  : 'Karz almak üçin bolmaly aýlyk zähmet haky'}
                :
              </h6>
              <h5>{creditDuration === 0 ? 0 : monthlyPayment * 2} TMT</h5>
            </div>
            <div className="cs-2-right-bottom">
              <h6>
                <span>*</span>
                {locale === 'TKM'
                  ? ' 1 ýylda 365 gun we ortaça 1 aýda 30 gün hasaby bilen'
                  : locale === 'РУС'
                  ? ' с расчетом 365 дней в году и среднемесячно 30 дней в месяце'
                  : locale === 'ENG'
                  ? ' based on 365 days per year and monthly average 30 days per month'
                  : ' 1 ýylda 365 gun we ortaça 1 aýda 30 gün hasaby bilen'}
              </h6>
            </div>
          </div>
        </div>
      </form>
    </section>
  );
};

export default CalculateStage;
