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

// IMPORT COMPONENTS
import CustomSelect from "../global/CustomSelect";

// IMPORT IMAGES
import arrow from "../../icons/arrow.svg";
import next from "../../icons/next.svg";

const CreditStage1 = ({ setStage, data, setData, creditData, id, setId }) => {
  const { locale } = useContext(LanguageContext);
  const [req, setReq] = useState({
    RUS: "",
    TKM: "",
    ENG: "",
  });
  const [input, setInput] = useState(
    data.type_localized ? data.type_localized : null
  );
  const [inputValid, setInputValid] = useState(data.type ? data.type : null);
  const [dropdown, setDropdown] = useState({
    one: false,
    two: false,
  });

  useEffect(() => {
    if (input !== "" && creditData) {
      creditData.data.map((el) => {
        if (
          Object.values(el).includes(input) ||
          Object.values(
            JSON.parse(
              el.translations.find((els) => els.locale === "ru").attribute_data
            )
          ).includes(input) ||
          Object.values(
            JSON.parse(
              el.translations.find((els) => els.locale === "en").attribute_data
            )
          ).includes(input)
        ) {
          setId(el.id);
          setInputValid(el.name);
          setReq({
            ...req,
            TKM: el.documents,
            RUS: el.translations.find((els) => els.locale === "ru")
              ? JSON.parse(
                  el.translations.find((els) => els.locale === "ru")
                    .attribute_data
                ).documents
              : "",
            ENG: el.translations.find((els) => els.locale === "en")
              ? JSON.parse(
                  el.translations.find((els) => els.locale === "en")
                    .attribute_data
                ).documents
              : "",
          });
        }
      });
    }
  }, [input]);

  return (
    <section className="cs-1">
      <form>
        <div className="cs-1-top">
          <label htmlFor="credit-type">
            {locale === "TKM"
              ? "Karzyň görnüşini saýlaň"
              : locale === " РУС"
              ? "Выберите вид кредита"
              : locale === "ENG"
              ? "Choose loan type"
              : "Karzyň görnüşini saýlaň"}
          </label>
          <CustomSelect
            items={
              creditData
                ? locale === "ENG"
                  ? creditData.data
                      .map((el) =>
                        el.translations.find((els) => els.locale === "en")
                          ? JSON.parse(
                              el.translations.find((els) => els.locale === "en")
                                .attribute_data
                            )
                          : ""
                      )
                      .map((item) => item.name)
                  : locale === "РУС"
                  ? creditData.data
                      .map((el) =>
                        el.translations.find((els) => els.locale === "ru")
                          ? JSON.parse(
                              el.translations.find((els) => els.locale === "ru")
                                .attribute_data
                            )
                          : ""
                      )
                      .map((item) => item.name)
                  : locale === "TKM"
                  ? creditData.data.map((el) => el.name)
                  : creditData.data.map((el) => el.name)
                : [""]
            }
            customId={"credit-type"}
            name={"credit-type"}
            blockName={"cs-1-top-block"}
            elName={"cs-1-top-input"}
            eTarget={true}
            placeholder={
              locale === "TKM"
                ? "Karzyň görnüşi"
                : locale === "РУС"
                ? "Вид кредита"
                : locale === "ENG"
                ? "Loan type"
                : "Karzyň görnüşi"
            }
            stateSetter={(e) => {
              setInput(e);
            }}
            defaultValue={input}
          />
        </div>
        <div className="cs-1-middle">
          <div
            className="data-block term"
            onClick={() => {
              setDropdown({ ...dropdown, one: !dropdown.one });
            }}
          >
            <div className="data-title">
              <h4>
                {locale === "TKM"
                  ? "Karz barada maglumat"
                  : locale === "РУС"
                  ? "Информация о кредите"
                  : locale === "ENG"
                  ? "Loan Information"
                  : "Karz barada maglumat"}
              </h4>
              <div className="data-img">
                <img src={arrow} alt="arrow" />
              </div>
            </div>
            <div
              className={
                dropdown.one
                  ? "data-dropdown grid active"
                  : "data-dropdown grid"
              }
            >
              <div className="dropdown-inner bottom">
                <h6>
                  {locale === "TKM"
                    ? "Karzyň möhleti"
                    : locale === "РУС"
                    ? "Срок кредита"
                    : locale === "ENG"
                    ? "Credit term"
                    : "Karzyň möhleti"}
                </h6>
                <h2>
                  {locale === "TKM"
                    ? ""
                    : locale === "РУС"
                    ? "до "
                    : locale === "ENG"
                    ? "up to "
                    : ""}
                  {creditData
                    ? creditData.data.map((el) => (el.id === id ? el.term : ""))
                    : ""}{" "}
                  {locale === "TKM"
                    ? "ýyla çenli"
                    : locale === "РУС"
                    ? "лет"
                    : locale === "ENG"
                    ? "years"
                    : "ýyla çenli"}
                </h2>
              </div>
              <div className="dropdown-inner left right bottom">
                <h6>
                  {locale === "TKM"
                    ? "Karzyň möçberi"
                    : locale === "РУС"
                    ? "Сумма кредита"
                    : locale === "ENG"
                    ? "Credit amount"
                    : "Karzyň möçberi"}
                </h6>
                <h2>
                  {creditData
                    ? creditData.data.map((el) => (el.id === id ? el.sum : ""))
                    : ""}
                </h2>
              </div>
              <div className="dropdown-inner bottom">
                <h6>
                  {locale === "TKM"
                    ? "Göterim"
                    : locale === "РУС"
                    ? "Ставка"
                    : locale === "ENG"
                    ? "Rate"
                    : "Göterim"}
                </h6>
                <h2>
                  {creditData
                    ? creditData.data.map((el) => (el.id === id ? el.bet : ""))
                    : ""}{" "}
                  %
                </h2>
              </div>
              <div className="dropdown-inner ">
                <h6>
                  {locale === "TKM"
                    ? "Karzyň üzülmegini üpjün etmek"
                    : locale === "РУС"
                    ? "Обеспечение возврата кредита"
                    : locale === "ENG"
                    ? "Ensuring loan repayment"
                    : "Karzyň üzülmegini üpjün etmek"}
                </h6>
                <h2
                  dangerouslySetInnerHTML={{
                    __html: creditData
                      ? locale === "ENG"
                        ? creditData.data
                            .map((el) =>
                              el.id === id
                                ? el.translations.find(
                                    (els) => els.locale === "en"
                                  )
                                  ? JSON.parse(
                                      el.translations.find(
                                        (els) => els.locale === "en"
                                      ).attribute_data
                                    ).securing_return
                                  : ""
                                : ""
                            )
                            .filter((string) => string !== "")
                        : locale === "РУС"
                        ? creditData.data
                            .map((el) =>
                              el.id === id
                                ? el.translations.find(
                                    (els) => els.locale === "ru"
                                  )
                                  ? JSON.parse(
                                      el.translations.find(
                                        (els) => els.locale === "ru"
                                      ).attribute_data
                                    ).securing_return
                                  : ""
                                : ""
                            )
                            .filter((string) => string !== "")
                        : locale === "TKM"
                        ? creditData.data
                            .map((el) =>
                              el.id === id ? el.securing_return : ""
                            )
                            .filter((string) => string !== "")
                        : creditData.data
                            .map((el) =>
                              el.id === id ? el.securing_return : ""
                            )
                            .filter((string) => string !== "")
                      : "",
                  }}
                ></h2>
              </div>
              <div className="dropdown-inner left right">
                <h6>
                  {locale === "TKM"
                    ? "Karzy üzmegiň çeşmesi"
                    : locale === "РУС"
                    ? "Источник погашения кредита"
                    : locale === "ENG"
                    ? "Loan repayment source"
                    : "Karzy üzmegiň çeşmesi"}
                </h6>
                <h2>
                  {creditData
                    ? locale === "ENG"
                      ? creditData.data.map((el) =>
                          el.id === id
                            ? el.translations.find((els) => els.locale === "en")
                              ? JSON.parse(
                                  el.translations.find(
                                    (els) => els.locale === "en"
                                  ).attribute_data
                                ).source_of_repayment
                              : ""
                            : ""
                        )
                      : locale === "РУС"
                      ? creditData.data.map((el) =>
                          el.id === id
                            ? el.translations.find((els) => els.locale === "ru")
                              ? JSON.parse(
                                  el.translations.find(
                                    (els) => els.locale === "ru"
                                  ).attribute_data
                                ).source_of_repayment
                              : ""
                            : ""
                        )
                      : locale === "TKM"
                      ? creditData.data.map((el) =>
                          el.id === id ? el.source_of_repayment : ""
                        )
                      : locale === "TKM"
                      ? creditData.data.map((el) =>
                          el.id === id ? el.source_of_repayment : ""
                        )
                      : creditData.data.map((el) =>
                          el.id === id ? el.source_of_repayment : ""
                        )
                    : ""}
                </h2>
              </div>
              <div className="dropdown-inner">
                <h6>
                  {locale === "TKM"
                    ? "Karzy üzmegiň usuly"
                    : locale === "РУС"
                    ? "Способ погашения"
                    : locale === "ENG"
                    ? "Repayment method"
                    : "Karzy üzmegiň usuly"}
                </h6>
                <h2>
                  {" "}
                  {creditData
                    ? locale === "ENG"
                      ? creditData.data.map((el) =>
                          el.id === id
                            ? el.translations.find((els) => els.locale === "en")
                              ? JSON.parse(
                                  el.translations.find(
                                    (els) => els.locale === "en"
                                  ).attribute_data
                                ).repayment_method
                              : ""
                            : ""
                        )
                      : locale === "РУС"
                      ? creditData.data.map((el) =>
                          el.id === id
                            ? el.translations.find((els) => els.locale === "ru")
                              ? JSON.parse(
                                  el.translations.find(
                                    (els) => els.locale === "ru"
                                  ).attribute_data
                                ).repayment_method
                              : ""
                            : ""
                        )
                      : locale === "TKM"
                      ? creditData.data.map((el) =>
                          el.id === id ? el.repayment_method : ""
                        )
                      : creditData.data.map((el) =>
                          el.id === id ? el.repayment_method : ""
                        )
                    : ""}
                </h2>
              </div>
            </div>
          </div>
        </div>
        <div className="card-button cs-1-bottom">
          <button
            disabled={!input}
            type="button"
            className="sign-btn cd-btn"
            onClick={() => {
              setStage(2);
              setData({ ...data, type: inputValid, type_localized: input });
            }}
          >
            <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>
      </form>
    </section>
  );
};

export default CreditStage1;
