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

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

const TopupStage4 = ({ setStage, data, setData, topupData, id }) => {
  const [files, setFiles] = useState(data.file ? data.file : []);
  const { locale } = useContext(LanguageContext);
  const [btnEnabled, setBtnEnabled] = useState(false);
  const [dropdown, setDropdown] = useState(false);
  const [req, setReq] = useState({
    RUS: "",
    TKM: "",
    ENG: "",
  });

  const [validSize, setValidSize] = useState(true);

  //    Bytes <=    Megabytes
  //      |      |||||||||||||||||
  const maxSize = maxFileSize * 1024 * 1024;
  // const tempData = [
  //   `
  //   1. Arza - (Bankyň Nusgasy);
  //   2. Pasport Raýat (asyl nusga, hemme sahypalaryň kopiýasy bilen); \n
  //   3. Pasport Daşary ýurt (asyl nusga, hemme sahypalaryň kopiýasy bilen); \n
  //   4. Visa kartynyň rekwizitleriniň kopiýasy 2 nusgada; \n
  //   5. Aýlyk haky barada kepilnama; \n
  //   6. Nagt däl doldurylýan bolasa, kartyň göçürmesi (wypiska); \n
  //   7. Pensiýa kitapçasy asyl nusga (döwlete dahylsyz edarada işleýänler); \n
  //   8. Maşgala agzalary üçin töleg edilende: \n
  //   Maşgala agzasydygyny tassyklaýan resminama (dogluş hakynda
  //   şahadatnama, nika hakynda şahadatnama we ş.m. kopiýalary bilen); \n
  //   *Bellik: 2016-njy ýylyň 5-nji sentýabryndan soňra pasport çalşylan bolsa,
  //   könesiniň kopiýasy hem gerek! \n
  //   Töleg edijiniň özüniň bolmagy hökmany. Hemme resminamalaryň asyl nusgalary bolmagy
  //   zerurdyr.Töleýjiniň ýazgyda duran ýeri \n
  //   Aşgabat ş. hökmany bolmaly.`,
  //   ``,
  //   `
  //   1. Arza - (Bankyň Nusgasy); \n
  //   2. Pasport Raýat ( hemme sahypalaryň kopiýasy bilen); \n
  //   3. Pasport Daşary ýurt (hemme sahypalaryň kopiýasy bilen girdi çhykdy
  //   peçatlary, daşary ýurtda ýaşamak baradaky wagtlaýynça wizasy bolmaly); \n
  //   4. Talybyň okaýandygy baradaky kepilnamasy 2 nusgada \n
  //   5. Talybyň talyp şahadatnamasy 2 nusgada \n
  //   6. Visa kartynyň rekwizitleriniň kopiýasy 2 nusgada; \n
  //   7. Maşgala agzalary töleg edende: \n
  //   Maşgala agzasydygyny tassyklaýan resminama (dogluş hakynda
  //   şahadatnama, nika hakynda şahadatnama, pasport we ş.m. kopiýalary
  //   bilen); \n
  //   *Bellik: 2016-njy ýylyň 5-nji sentýabryndan soňra pasport çalşylan bolsa,
  //   könesiniň kopiýasy hem gerek!
  //   Töleg edijiniň özüniň bolmagy hökmany. Hemme resminamalaryň asyl nusgalary bolmagy zerurdyr.
  //   Töleýjiniň ýazgyda duran ýeri
  //   Aşgabat ş. hökmany bolmaly.`,
  //   `
  //   1. Arza - (Bankyň Nusgasy); \n
  //   2. Pasport Raýat (asyl nusga, hemme sahypalaryň kopiýasy bilen); \n
  //   3. Pasport Daşary ýurt (asyl nusga, hemme sahypalaryň kopiýasy bilen); \n
  //   4. Visa kartynyň rekwizitleriniň kopiýasy 2 nusgada; \n
  //   5. Deklarasiýa; \n
  //   6. Salgyt gullugyndan bergisi ýok diýip sprawka \n
  //   7. Pensiýonnydan bergisi ýok diýip sprawka; Pensiýa kitapçasy asyl nusga; \n
  //   8. Nagt (10%) kartyň göçürmesi (wypiska) \n
  //   9. Maşgala agzalary üçin töleg edilende: \n
  //   Maşgala agzasydygyny tassyklaýan resminama (dogluş hakynda
  //   şahadatnama, nika hakynda şahadatnama we ş.m. kopiýalary bilen); \n
  //   *Bellik: 2016-njy ýylyň 5-nji sentýabryndan soňra pasport çalşylan bolsa,
  //   könesiniň kopiýasy hem gerek! \n
  //   Töleg edijiniň özüniň bolmagy hökmany. Hemme resminamalaryň asyl nusgalary bolmagy zerurdyr. \n
  //   Töleýjiniň ýazgyda duran ýeri \n
  //   Aşgabat ş. hökmany bolmaly.`,
  //   `
  //   1. Fiziki şahsyň arzasy we töleg tabşyrygy; \n
  //   2. Talyp bilen ýokary okuw mekdep arasyndaky baglaşylan şertnama (asyl nusgasy ýa-da
  //   aragatnaşyk edaralaryň (telekom, internet, elektron görnüşde) üsti bilen gelen we göçürmesi); \n
  //   3. Ýokary okuw mekdep tarapyndan berilen hasap-nyrhnama (ýa-da aragatnaşyk edaralaryň
  //   (telekom, internet, elektron görnüşde) üsti bilen gelen we göçürmesi); \n
  //   4. Ýokary okuw mekdebinde okaýandygy barada güwänamasy şertnama (asyl nusgasy ýa-da
  //   aragatnaşyk edaralaryň (telekom, internet, elektron görnüşde) üsti bilen gelen we göçürmesi); \n
  //   5. Talyp şahadatnamasy; \n
  //   6. Okuw töleg möçberini görkezýän bilim edaranyň internet sahypasyndan göçürme; \n
  //   7. Okuw tölegi başga bankdan tölenen ýagdaýynda şol bankyndan geçirilen tölegiň SWIFT
  //   resminamasy ýa-da beýleki tassyklaýjy resminamalar; \n
  //   8. Talyp okaýan ýokary okuw mekdebini çalşan ýagdaýynda okan ýokary okuw mekdebiniň
  //   resminamalary; \n
  //   9. Talybyň we talyp üçin töleg geçirmek isleg bildirýän garyndaşlarynyň pasport (içki, daşky) we
  //   garyndaşlygyny anyklaýan resminamalaryň göçürmeleri.`,
  //   `1. Fiziki şahsyň arzasy we töleg tabşyrygy; \n
  //   2. Türkmenistanyň Saglygy goraýyş we derman senagaty ministrliginiň Türkmenistanyň çäginden
  //   daşarda saglygynyň barlanmagynyň we bejerilmeginiň zerurlygy baradaky netijenamasy; \n
  //   3. Netijenamada görkezilen saglygy goraýyş edaranyň hasap-nyrhanamasy we/ýa-da şertnama; \n
  //   4. Daşary ýurdyň çakylyk haty; \n
  //   5. Fiziki şahsyň we/ýa-da onuň üçin töleg geçirmek isleg bildiryän garyndaşlarynyň pasport
  //   (içki,daşky) we garyndaşlygyny anyklaýan resminamalaryň göçürmeleri.`,
  // ];

  useEffect(() => {
    if (files.length > 0) {
      setBtnEnabled(true);
    } else {
      setBtnEnabled(false);
    }
  }, [files]);
  useEffect(() => {
    if (topupData) {
      topupData.data.map((el) => {
        if (el.id === id) {
          setReq({
            ...req,
            TKM: el.requirements_documents,
            RUS: el.translations.find((els) => els.locale === "ru")
              ? JSON.parse(
                  el.translations.find((els) => els.locale === "ru")
                    .attribute_data
                ).requirements_documents
              : "",
            ENG: el.translations.find((els) => els.locale === "en")
              ? JSON.parse(
                  el.translations.find((els) => els.locale === "en")
                    .attribute_data
                ).requirements_documents
              : "",
          });
        }
      });
    }
  }, [topupData, id]);
  return (
    <section className="card-stage-4">
      <form>
        <div className="cd-top-4">
          <h2>
            {locale === "TKM"
              ? "Hasaby doldurmak üçin talap edilýän resminamalary ýükläň."
              : locale === "РУС"
              ? "Для оформления заявки на пополнение счета загрузите требуемые документы."
              : locale === "ENG"
              ? "To apply for an account top up, upload the required documents."
              : "Hasaby doldurmak üçin talap edilýän resminamalary ýükläň."}
          </h2>
          <div
            className="data-block docs"
            onClick={() => {
              setDropdown(!dropdown);
            }}
          >
            <div className="data-title">
              <h4>
                {locale === "TKM"
                  ? "Talaplar we resminamalar"
                  : locale === "РУС"
                  ? "Требования и документы"
                  : locale === "ENG"
                  ? "Requirements and documents"
                  : "Talaplar we resminamalar"}
              </h4>
              <div className="data-img">
                <img src={arrow} alt="arrow" />
              </div>
            </div>
            <div
              className={
                dropdown ? "data-dropdown docs active" : "data-dropdown docs"
              }
            >
              <div
                className="text-block"
                dangerouslySetInnerHTML={{
                  __html:
                    locale === "TKM"
                      ? req.TKM
                      : locale === "РУС"
                      ? req.RUS
                      : locale === "ENG"
                      ? req.ENG
                      : req.TKM,
                }}
              >
                {/* <pre>
                  {data.type_localized === "VISA hasaby doldurmak"
                    ? tempData[0]
                    : data.type_localized === "VISA hasaby doldurmak (RUB)"
                    ? tempData[1]
                    : data.type_localized ===
                      "VISA hasaby doldurmak (talyplar üçin)"
                    ? tempData[2]
                    : data.type_localized ===
                      "VISA hasaby doldurmak (telekeçiler üçin)"
                    ? tempData[3]
                    : data.type_localized ===
                      "Daşary ýurt ýokary okuw mekdebi we umumy ýaşaýyş jaýy üçin tölegi"
                    ? tempData[4]
                    : data.type_localized ===
                      "Saglygy barlanylmagy we bejerilmegi üçin tölegi"
                    ? tempData[5]
                    : ""}
                </pre> */}
              </div>
            </div>
          </div>
        </div>
        <div className="cd-bottom-4">
          <div>
            <label htmlFor="file">
              {locale === "TKM"
                ? "Faýl ýükläň"
                : locale === "РУС"
                ? "Загрузить файл"
                : locale === "ENG"
                ? "Upload a file"
                : "Faýl ýükläň"}
            </label>
            <input
              id="file"
              type="file"
              accept=".jpg, .jpeg, .docx, .xls, .xlsx, .doc, .pdf, .png"
              onChange={(e) => {
                if (e.target.files[0].size > maxSize) {
                  setValidSize(false);
                  e.target.value = "";
                } else {
                  setFiles([...files, e.target.files[0]]);
                  e.target.value = "";
                  setValidSize(true);
                }
              }}
            />
          </div>
        </div>
        <ul className="cd-4-files">
          {files !== []
            ? files.map((el, i) => {
                if (el) {
                  return (
                    <li key={i}>
                      <h4>{el.name}</h4>
                      <div
                        className="remove"
                        onClick={() => {
                          setFiles(
                            files.filter((file) => {
                              return file !== el;
                            })
                          );
                        }}
                      >
                        <img src={remove} alt="remove" />
                      </div>
                    </li>
                  );
                }
              })
            : null}
        </ul>
        <p className="alert">
          {locale === "TKM"
            ? "Hemme faýllar diňe görkezilen formatda bolmaly: "
            : locale === "РУС"
            ? "Все файлы должны быть следующих форматов: "
            : locale === "ENG"
            ? "All files should be in following types:"
            : "Hemme faýllar diňe görkezilen formatda bolmaly: "}
          <span className="red">
            .jpg, .jpeg, .doc, .docx, .xls, .xlsx, .pdf, .png
          </span>
        </p>
        <p className={!validSize ? "alert red bold" : "alert"}>
          {locale === "TKM"
            ? `Faýlyň ölçegi ${maxFileSize} MB-den geçmeli däl`
            : locale === "РУС"
            ? `Размер файла не должен превышать ${maxFileSize} МБ`
            : locale === "ENG"
            ? `Size of the file should not exceed ${maxFileSize} MB`
            : `Faýlyň ölçegi ${maxFileSize} MB-den geçmeli däl`}
        </p>
        <div className="cu-bottom card-stage-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={() => {
              setData({ ...data, file: files });
              setStage(5);
            }}
          >
            <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 TopupStage4;
