// 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 { getDate } from "../../helpers/Date";
import next from "../../icons/next.svg";
import next_reverse from "../../icons/next-reverse.svg";
import { timeSheet } from "../../data/timeSheet";

// IMPORT VALIDATORS

// IMPORT IMAGES

// IMPORT COMPONENTS

const CardStage3 = ({ 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,
    date: data.date_arrival_bank ? data.date_arrival_bank : null,
    time: data.selected_time ? data.selected_time : null,
    code: data.the_codeword ? data.the_codeword : null,
    sms: data.sms_notification ? data.sms_notification : null,
  });
  const [btnEnabled, setBtnEnabled] = useState(false);

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

  useEffect(() => {
    if (
      inputValid.region === branch.regions.TKM[7] ||
      inputValid.region === branch.regions.RUS[7] ||
      inputValid.region === branch.regions.ENG[7]
    ) {
      if (inputValid.region && inputValid.date && inputValid.time && inputValid.code) {
        setBtnEnabled(true);
      } else {
        setBtnEnabled(false);
      }
    } else {
      if (inputValid.region && inputValid.affiliate && inputValid.date && inputValid.time && inputValid.code) {
        setBtnEnabled(true);
      } else {
        setBtnEnabled(false);
      }
    }
  }, [branch.regions.ENG, branch.regions.RUS, branch.regions.TKM, 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 });
    }
  }, [branch.regions.ENG, branch.regions.RUS, branch.regions.TKM, inputValid, inputValid.region]);

  return (
    <section className="card-stage-3">
      <form>
        <div className="card-stage-3-top">
          <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 === "Mary") {
                      if (locale === "РУС") {
                        index = branch["Mary"].RUS.findIndex((e) => e === state);
                      } else if (locale === "ENG") {
                        index = branch["Mary"].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].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 === "Mary") {
                        setInputLocal({
                          ...inputLocal,
                          affiliate: branch["Mary"].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 className="input-block">
            <label htmlFor="date">
              {locale === "TKM"
                ? "Banka gelmek gününi saýlaň"
                : locale === "РУС"
                ? "Выбрать дату прихода в банк"
                : locale === "ENG"
                ? "Select the date of arrival at the bank"
                : "Banka gelmek gününi saýlaň"}

              <span>*</span>
            </label>
            <input
              type="date"
              min={getDate(0)}
              id="date"
              name="date"
              defaultValue={inputValid.date}
              onChange={(e) => {
                if (e.target.value !== "") {
                  setInputValid({ ...inputValid, date: e.target.value });
                } else {
                  setInputValid({ ...inputValid, date: false });
                }
              }}
            />
          </div>
          <div className="input-block">
            <label htmlFor="time">
              {locale === "TKM"
                ? "Amatly wagty saýlaň"
                : locale === "РУС"
                ? "Выберите удобное время"
                : locale === "ENG"
                ? "Choose a convenient time"
                : "Amatly wagty saýlaň"}

              <span>*</span>
            </label>
            <CustomSelect
              items={timeSheet}
              customId={"time"}
              blockName={"card-3-select"}
              elName={"card-3-select-el"}
              name={"time"}
              placeholder={
                locale === "TKM"
                  ? "Wagty saýlaň"
                  : locale === "РУС"
                  ? "Выберите время"
                  : locale === "ENG"
                  ? "Choose time"
                  : "Wagty saýlaň"
              }
              stateSetter={(state) => setInputValid({ ...inputValid, time: state })}
              eTarget={true}
              defaultValue={inputValid.time}
            />
          </div>
          <div className="input-block">
            <label htmlFor="code">
              {locale === "TKM"
                ? "Gizlin söz"
                : locale === "РУС"
                ? "Кодовое слово"
                : locale === "ENG"
                ? "Codeword"
                : "Gizlin söz"}
              <span>*</span>
            </label>
            <input
              type="text"
              id="code"
              name="code"
              placeholder="amanamanow12"
              defaultValue={inputValid.code}
              onChange={(e) => {
                if (e.target.value !== "") {
                  setInputValid({ ...inputValid, code: e.target.value });
                } else {
                  setInputValid({ ...inputValid, code: false });
                }
              }}
            />
          </div>
        </div>
        <div className="card-stage-3-middle">
          <div className="check-block">
            <input
              type="checkbox"
              id="sms"
              name="sms"
              checked={inputValid.sms ? inputValid.sms : false}
              onChange={(e) => {
                setInputValid({ ...inputValid, sms: e.target.checked });
              }}
            />
            <label htmlFor="sms">
              {locale === "TKM"
                ? "SMS-birikdirme"
                : locale === "РУС"
                ? "SMS - подключение"
                : locale === "ENG"
                ? "SMS connection"
                : "SMS-birikdirme"}
            </label>
          </div>
          {locale === "TKM" ? (
            inputValid.sms ? (
              <h3 className="green">Siziň kartyňyz SMS hyzmatyna birikdiriler</h3>
            ) : (
              ""
            )
          ) : locale === "РУС" ? (
            inputValid.sms ? (
              <h3 className="green">Ваша карта будет подключена к СМС услуге</h3>
            ) : (
              ""
            )
          ) : locale === "ENG" ? (
            inputValid.sms ? (
              <h3 className="green">Your card will be connected to the SMS service</h3>
            ) : (
              ""
            )
          ) : inputValid.sms ? (
            <h3 className="green">Siziň kartyňyz SMS hyzmatyna birikdiriler</h3>
          ) : (
            ""
          )}
        </div>
        <div className="cu-bottom card-stage-3-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,
                sms_notification: inputValid.sms ? 1 : 0,
                region: inputLocal.region,
                region_localized: inputValid.region,
                branch: inputLocal.affiliate,
                branch_localized: inputValid.affiliate,
                date_arrival_bank: inputValid.date,
                selected_time: inputValid.time,
                the_codeword: inputValid.code,
              });
            }}
          >
            <div>
              <h3>
                {locale === "TKM"
                  ? "Dowam et"
                  : locale === "РУС"
                  ? "Продолжить"
                  : locale === "ENG"
                  ? "Continue"
                  : "Dowam et"}
              </h3>
              <div className="btn-img">
                <img src={next} alt="logout" />
              </div>
            </div>
          </button>
        </div>
      </form>
    </section>
  );
};

export default CardStage3;
