// IMPORT MODULES

import React, { useContext, useEffect, useState } from "react";

import CustomSelect from "../global/CustomSelect";
import { LanguageContext } from "../../backend/LanguageContext";
import { branchData } from "../../localization/branchData";
import next from "../../icons/next.svg";
import next_reverse from "../../icons/next-reverse.svg";

// IMPORT IMAGES

// IMPORT COMPONENTS

const CreditStage4 = ({ setStage, data, setData }) => {
  const { locale } = useContext(LanguageContext);
  const branch = branchData();
  const [inputValid, setInputValid] = useState({
    workplace: data.workplace ? data.workplace : null,
    salary: data.salary ? data.salary : null,
    position: data.position ? data.position : null,
    experience: data.exp ? data.exp : null,
    region: data.region_localized ? data.region_localized : null,
    affiliate: data.branch_localized ? data.branch_localized : 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 === branch.regions.TKM[7] ||
      inputValid.region === branch.regions.RUS[7] ||
      inputValid.region === branch.regions.ENG[7]
    ) {
      if (
        inputValid.workplace &&
        inputValid.salary &&
        inputValid.position &&
        inputValid.experience &&
        inputValid.region
      ) {
        setBtnEnabled(true);
      } else {
        setBtnEnabled(false);
      }
    } else {
      if (
        inputValid.workplace &&
        inputValid.salary &&
        inputValid.position &&
        inputValid.experience &&
        inputValid.region &&
        inputValid.affiliate
      ) {
        setBtnEnabled(true);
      } else {
        setBtnEnabled(false);
      }
    }
  }, [inputValid]);

  useEffect(() => {
    if (
      inputValid.region === branch.regions.TKM[7] ||
      inputValid.region === branch.regions.RUS[7] ||
      inputValid.region === branch.regions.ENG[7]
    ) {
      setInputValid({ ...inputValid, affiliate: null });
    }
  }, [inputValid.region]);

  return (
    <section className="card-stage-3">
      <form>
        <div className="card-stage-3-top">
          <div className="input-block">
            <label htmlFor="workplace">
              {locale === "TKM"
                ? "Iş ýeri"
                : locale === "РУС"
                ? "Место работы"
                : locale === "ENG"
                ? "Place of work"
                : "Iş ýeri"}
              <span>*</span>
            </label>
            <input
              type="text"
              id="workplace"
              name="workplace"
              defaultValue={inputValid.workplace}
              placeholder='TPTB "HALKBANK"'
              onChange={(e) => {
                setInputValid({ ...inputValid, workplace: e.target.value });
              }}
            />
          </div>
          <div className="input-block">
            <label htmlFor="salary">
              {locale === "TKM"
                ? "Aýlyk haky"
                : locale === "РУС"
                ? "Сумма зарплаты"
                : locale === "ENG"
                ? "Amount of salary"
                : "Aýlyk haky"}
              <span>*</span>
            </label>
            <input
              type="text"
              id="salary"
              name="salary"
              defaultValue={inputValid.salary}
              placeholder="4000"
              onChange={(e) => {
                setInputValid({ ...inputValid, salary: e.target.value });
              }}
            />
          </div>
          <div className="input-block">
            <label htmlFor="position">
              {locale === "TKM"
                ? "Wezipesi"
                : locale === "РУС"
                ? "Должность"
                : locale === "ENG"
                ? "Job title"
                : "Wezipesi"}
              <span>*</span>
            </label>
            <input
              type="text"
              id="position"
              name="position"
              defaultValue={inputValid.position}
              onChange={(e) => {
                setInputValid({ ...inputValid, position: e.target.value });
              }}
            />
          </div>
          <div className="input-block">
            <label htmlFor="experience">
              {locale === "TKM"
                ? "Soňky iş ýeri boýunça tejribe"
                : locale === "РУС"
                ? "Стаж с последнего места работы"
                : locale === "ENG"
                ? "Length of service from last job"
                : "Soňky iş ýeri boýunça tejribe"}

              <span>*</span>
            </label>
            <input
              type="text"
              id="experience"
              name="experience"
              defaultValue={inputValid.experience}
              placeholder={
                locale === "TKM"
                  ? "6 aýdan köp"
                  : locale === "РУС"
                  ? "Более 6 месяцев"
                  : locale === "ENG"
                  ? "More than 6 months"
                  : "6 aýdan köp"
              }
              onChange={(e) => {
                setInputValid({ ...inputValid, experience: e.target.value });
              }}
            />
          </div>
          <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>
          {inputValid.region !== branch.regions.TKM[7] &&
          inputValid.region !== branch.regions.RUS[7] &&
          inputValid.region !== branch.regions.ENG[7] ? (
            <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
                    : inputValid.region === "Город Аркадаг" ||
                      inputValid.region === "Arkadag city" ||
                      inputValid.region === "Arkadag şäheri"
                    ? locale === "TKM"
                      ? branch.Arkadag.TKM
                      : locale === "РУС"
                      ? branch.Arkadag.RUS
                      : locale === "ENG"
                      ? branch.Arkadag.ENG
                      : branch.Arkadag.TKM
                    : [""]
                }
                customId={"affiliate"}
                blockName={"card-3-select"}
                elName={"card-3-select-el"}
                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 (inputLocal.region === "Arkadag şäheri") {
                      if (locale === "РУС") {
                        index = branch["Arkadag"].RUS.findIndex((e) => e === state);
                      } else if (locale === "ENG") {
                        index = branch["Arkadag"].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 if (inputLocal.region === "Arkadag şäheri") {
                        setInputLocal({
                          ...inputLocal,
                          affiliate: branch["Arkadag"].TKM[index],
                        });
                      } else {
                        setInputLocal({
                          ...inputLocal,
                          affiliate: branch[inputLocal.region].TKM[index],
                        });
                      }
                    }
                  }
                }}
                eTarget={true}
                defaultValue={inputValid.affiliate}
              />
            </div>
          ) : null}
        </div>
        <div className="cu-bottom card-stage-3-bottom cs-4-bottom">
          <button
            type="button"
            className="sign-btn reg-btn"
            onClick={() => {
              setStage(3);
            }}
          >
            <div>
              <div className="btn-img">
                <img src={next_reverse} alt="logout" />
              </div>
              <h3
                onClick={() => {
                  setStage(3);
                }}
              >
                {locale === "TKM" ? "Yza" : locale === "РУС" ? "Назад" : locale === "ENG" ? "Back" : "Yza"}
              </h3>
            </div>
          </button>
          <button
            type="button"
            disabled={!btnEnabled}
            className="sign-btn cu-btn"
            onClick={() => {
              setStage(5);
              setData({
                ...data,
                workplace: inputValid.workplace,
                region: locale === "TKM" ? inputValid.region : inputLocal.region,
                region_localized: inputValid.region,
                branch: locale === "TKM" ? inputValid.affiliate : inputLocal.affiliate,
                branch_localized: inputValid.affiliate,
                exp: inputValid.experience,
                position: inputValid.position,
                salary: inputValid.salary,
              });
            }}
          >
            <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 CreditStage4;
