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

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

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

const TopupStage3 = ({ setStage, data, setData }) => {
  const { locale } = useContext(LanguageContext);
  const branch = branchData();
  const [inputValid, setInputValid] = useState({
    region: data.region_localized ? data.region_localized : null,
    affiliate: data.branch_localized ? data.branch_localized : null,
    message: data.message ? data.message : null,
  });

  const [inputLocal, setInputLocal] = useState({
    region: data.region ? data.region : null,
    affiliate: data.branch ? data.branch : null,
  });
  const [btnEnabled, setBtnEnabled] = useState(false);

  useEffect(() => {
    if (inputValid.region && inputValid.affiliate) {
      setBtnEnabled(true);
    } else {
      setBtnEnabled(false);
    }
  }, [inputValid]);

  return (
    <section className="card-stage-3">
      <form>
        <div className="card-stage-3-top topup-3-top">
          <div className="topup-3-inputs">
            <div className="input-block">
              <label htmlFor="region">
                {locale === "TKM"
                  ? "Welaýat"
                  : locale === "РУС"
                  ? "Регион"
                  : locale === "ENG"
                  ? "Region"
                  : "Welaýat"}
                <span>*</span>
              </label>
              <CustomSelect
                items={
                  locale === "TKM"
                    ? branch.regions.TKM
                    : locale === "РУС"
                    ? branch.regions.RUS
                    : locale === "ENG"
                    ? branch.regions.ENG
                    : branch.regions.TKM
                }
                customId={"region"}
                blockName={"card-3-select"}
                elName={"card-3-select-el"}
                name={"region"}
                placeholder={
                  locale === "TKM"
                    ? "Welaýaty saýlaň"
                    : locale === "РУС"
                    ? "Выберите регион"
                    : locale === "ENG"
                    ? "Choose region"
                    : "Welaýaty saýlaň"
                }
                stateSetter={(state) => {
                  setInputValid({ ...inputValid, region: state });
                  if (state) {
                    let index;
                    if (locale === "РУС") {
                      index = branch.regions.RUS.findIndex((e) => e === state);
                    } else if (locale === "ENG") {
                      index = branch.regions.ENG.findIndex((e) => e === state);
                    }
                    if (index === -1) {
                      setInputLocal({ ...inputLocal, region: state });
                    } else {
                      setInputLocal({
                        ...inputLocal,
                        region: branch.regions.TKM[index],
                      });
                    }
                  }
                }}
                eTarget={true}
                defaultValue={inputValid.region}
              />
            </div>
            <div className="input-block">
              <label htmlFor="affiliate">
                {locale === "TKM"
                  ? "Şahamça"
                  : locale === "РУС"
                  ? "Филиал"
                  : locale === "ENG"
                  ? "Branch"
                  : "Şahamça"}
                <span>*</span>
              </label>
              <CustomSelect
                items={
                  inputValid.region === "Город Ашхабад" ||
                  inputValid.region === "Ashgabat city" ||
                  inputValid.region === "Aşgabat şäheri"
                    ? locale === "TKM"
                      ? branch.Ashgabat.TKM
                      : locale === "РУС"
                      ? branch.Ashgabat.RUS
                      : locale === "ENG"
                      ? branch.Ashgabat.ENG
                      : branch.Ashgabat.TKM
                    : inputValid.region === "Ахалский регион" ||
                      inputValid.region === "Akhal region" ||
                      inputValid.region === "Ahal"
                    ? locale === "TKM"
                      ? branch.Ahal.TKM
                      : locale === "РУС"
                      ? branch.Ahal.RUS
                      : locale === "ENG"
                      ? branch.Ahal.ENG
                      : branch.Ahal.TKM
                    : inputValid.region === "Балканский регион" ||
                      inputValid.region === "Balkan region" ||
                      inputValid.region === "Balkan"
                    ? locale === "TKM"
                      ? branch.Balkan.TKM
                      : locale === "РУС"
                      ? branch.Balkan.RUS
                      : locale === "ENG"
                      ? branch.Balkan.ENG
                      : branch.Balkan.TKM
                    : inputValid.region === "Дашогузский регион" ||
                      inputValid.region === "Dashoguz region" ||
                      inputValid.region === "Daşoguz"
                    ? locale === "TKM"
                      ? branch.Dashoguz.TKM
                      : locale === "РУС"
                      ? branch.Dashoguz.RUS
                      : locale === "ENG"
                      ? branch.Dashoguz.ENG
                      : branch.Dashoguz.TKM
                    : inputValid.region === "Лебапский регион" ||
                      inputValid.region === "Lebap region" ||
                      inputValid.region === "Lebap"
                    ? locale === "TKM"
                      ? branch.Lebap.TKM
                      : locale === "РУС"
                      ? branch.Lebap.RUS
                      : locale === "ENG"
                      ? branch.Lebap.ENG
                      : branch.Lebap.TKM
                    : inputValid.region === "Марыйский регион" ||
                      inputValid.region === "Mary region" ||
                      inputValid.region === "Mary"
                    ? locale === "TKM"
                      ? branch.Mary.TKM
                      : locale === "РУС"
                      ? branch.Mary.RUS
                      : locale === "ENG"
                      ? branch.Mary.ENG
                      : branch.Mary.TKM
                    : [""]
                }
                customId={"affiliate"}
                blockName={"card-3-select"}
                elName={"card-3-select-el"}
                defaultValue={inputValid.affiliate}
                name={"affiliate"}
                placeholder={
                  locale === "TKM"
                    ? "Şahamçany saýlaň"
                    : locale === "РУС"
                    ? "Выберите филиал"
                    : locale === "ENG"
                    ? "Choose branch"
                    : "Şahamçany saýlaň"
                }
                stateSetter={(state) => {
                  setInputValid({ ...inputValid, affiliate: state });
                  if (state && inputLocal.region) {
                    let index;
                    if (inputLocal.region === "Aşgabat şäheri") {
                      if (locale === "РУС") {
                        index = branch["Ashgabat"].RUS.findIndex(
                          (e) => e === state
                        );
                      } else if (locale === "ENG") {
                        index = branch["Ashgabat"].ENG.findIndex(
                          (e) => e === state
                        );
                      }
                    } else if (inputLocal.region === "Daşoguz") {
                      if (locale === "РУС") {
                        index = branch["Dashoguz"].RUS.findIndex(
                          (e) => e === state
                        );
                      } else if (locale === "ENG") {
                        index = branch["Dashoguz"].ENG.findIndex(
                          (e) => e === state
                        );
                      }
                    } else {
                      if (locale === "РУС") {
                        index = branch[inputLocal.region].RUS.findIndex(
                          (e) => e === state
                        );
                      } else if (locale === "ENG") {
                        index = branch[inputLocal.region].ENG.findIndex(
                          (e) => e === state
                        );
                      }
                    }

                    if (index === -1) {
                      setInputLocal({ ...inputLocal, affiliate: state });
                    } else {
                      if (inputLocal.region === "Aşgabat şäheri") {
                        setInputLocal({
                          ...inputLocal,
                          affiliate: branch["Ashgabat"].TKM[index],
                        });
                      } else if (inputLocal.region === "Daşoguz") {
                        setInputLocal({
                          ...inputLocal,
                          affiliate: branch["Dashoguz"].TKM[index],
                        });
                      } else {
                        setInputLocal({
                          ...inputLocal,
                          affiliate: branch[inputLocal.region].TKM[index],
                        });
                      }
                    }
                  }
                }}
                eTarget={true}
              />
            </div>
          </div>
          <div className="topup-3-text">
            <div className="input-block">
              <label htmlFor="msg">
                {locale === "TKM"
                  ? "Teswiriňiz"
                  : locale === "РУС"
                  ? "Ваш комментарий"
                  : locale === "ENG"
                  ? "Your comment"
                  : "Teswiriňiz"}
              </label>
              <textarea
                name="msg"
                id="msg"
                rows="5"
                defaultValue={data.message ? data.message : ""}
                onChange={(e) => {
                  setInputValid({ ...inputValid, message: e.target.value });
                }}
                placeholder={
                  locale === "TKM"
                    ? "Teswiriňiz"
                    : locale === "РУС"
                    ? "Ваш комментарий"
                    : locale === "ENG"
                    ? "Your comment"
                    : "Teswiriňiz"
                }
              ></textarea>
            </div>
          </div>
        </div>
        <div className="cu-bottom card-stage-3-bottom cs-4-bottom">
          <button
            type="button"
            className="sign-btn reg-btn"
            onClick={() => {
              setStage(2);
            }}
          >
            <div>
              <div className="btn-img">
                <img src={next_reverse} alt="logout" />
              </div>
              <h3
                onClick={() => {
                  setStage(2);
                }}
              >
                {locale === "TKM"
                  ? "Yza"
                  : locale === "РУС"
                  ? "Назад"
                  : locale === "ENG"
                  ? "Back"
                  : "Yza"}
              </h3>
            </div>
          </button>
          <button
            type="button"
            disabled={!btnEnabled}
            className="sign-btn cu-btn"
            onClick={() => {
              setStage(4);
              setData({
                ...data,
                message: inputValid.message,
                region:
                  locale === "TKM" ? inputValid.region : inputLocal.region,
                region_localized: inputValid.region,
                branch:
                  locale === "TKM"
                    ? inputValid.affiliate
                    : inputLocal.affiliate,
                branch_localized: inputValid.affiliate,
              });
            }}
          >
            <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 TopupStage3;
