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

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

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

const TopupStage1 = ({ setStage, data, setData, topupData, 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);

  useEffect(() => {
    if (input !== "" && topupData) {
      topupData.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.type);
          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"
              ? "Hasaby doldurmagyň görnüşini saýlaň"
              : locale === "РУС"
              ? "Выберите вид кредита"
              : locale === "ENG"
              ? "Select the payment type"
              : "Hasaby doldurmagyň görnüşini saýlaň"}
          </label>
          <CustomSelect
            items={
              topupData
                ? locale === "ENG"
                  ? topupData.data
                      .map((el) =>
                        el.translations.find((els) => els.locale === "en")
                          ? JSON.parse(
                              el.translations.find((els) => els.locale === "en")
                                .attribute_data
                            )
                          : ""
                      )
                      .map((item) => item.type)
                  : locale === "РУС"
                  ? topupData.data
                      .map((el) =>
                        el.translations.find((els) => els.locale === "ru")
                          ? JSON.parse(
                              el.translations.find((els) => els.locale === "ru")
                                .attribute_data
                            )
                          : ""
                      )
                      .map((item) => item.type)
                  : locale === "TKM"
                  ? topupData.data.map((el) => el.type)
                  : topupData.data.map((el) => el.type)
                : [""]
            }
            // items={[
            //   "VISA hasaby doldurmak",
            //   "VISA hasaby doldurmak (RUB)",
            //   "VISA hasaby doldurmak (talyplar üçin)",
            //   "VISA hasaby doldurmak (telekeçiler üçin)",
            //   "Daşary ýurt ýokary okuw mekdebi we umumy ýaşaýyş jaýy üçin tölegi",
            //   "Saglygy barlanylmagy we bejerilmegi üçin tölegi",
            // ]}
            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="tp-1-middle"
          dangerouslySetInnerHTML={{
            __html: topupData ? topupData.data[id - 1].information : "",
          }}
        ></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 TopupStage1;
