// IMPORT MODULES
import React, { useState, useContext } from "react";
import { LanguageContext } from "../../backend/LanguageContext";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
// IMPORT IMAGES
import next from "../../icons/next.svg";
import next_reverse from "../../icons/next-reverse.svg";
// import arrow from "../../icons/arrow.svg";

const schema = z.object({
  name: z.string().min(1),
  surname: z.string().min(1),
  passportSerial: z.string().min(1),
  passportNumber: z
    .number()
    .int()
    .gte(100000, { message: "Must be equal to 6 digits" })
    .lte(999999, { message: "Must be equal to 6 digits" }),
  bankAccount: z
    .number()
    .int()
    .gte(100000, { message: "Must be equal to 6 digits" })
    .lte(999999, { message: "Must be equal to 6 digits" }),
  // clientType: z.string(),
});

const GuaranterInfo = ({ setStage, isGuranter, guaranterData }) => {
  const { locale } = useContext(LanguageContext);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(schema),
    defaultValues: {
      name: guaranterData.name ? guaranterData.name : "Loading",
      surname: guaranterData.surname ? guaranterData.surname : "loading",
      lastname: guaranterData.lastname ? guaranterData.lastname : "loading",

      passportSerial: guaranterData.idSeria ? guaranterData.idSeria : "Loading",
      passportNumber: guaranterData.idNo ? guaranterData.idNo : "Loading",
      bankAccount: guaranterData.accountNo
        ? guaranterData.accountNo
        : "Loading",
      birthDate: guaranterData.birthDate ? guaranterData.birthDate : "Loading",
      address: guaranterData.address ? guaranterData.address : "Loading",
    },
  });

  const onSubmit = (data) => {
    // console.log(data);
  };

  return (
    <section className="imm-cs-1 cs-1">
      <form onSubmit={handleSubmit(onSubmit)}>
        <h2 className="cs-2-title">
          {locale === "TKM"
            ? "Zamunçynyň görkezilen maglumatlaryny tassyklaň, eger-de görkezilen maglumatlar nädogry bolsa ýa doldurylmadyk meýdançalar bolsa bank bilen habarlaşyň"
            : locale === "РУС"
            ? "Подтвердите предоставленную заёмщиком информацию. В случае, если данные не верны или есть незаполненные поля, просим обратиться в Банк!"
            : locale === "ENG"
            ? "Confirm the information provided by the guarantor. If the data is incorrect or there are blank fields, please contact the Bank!"
            : "Zamunçynyň görkezilen maglumatlaryny tassyklaň, eger-de görkezilen maglumatlar nädogry bolsa ýa doldurylmadyk meýdançalar bolsa bank bilen habarlaşyň"}
        </h2>
        <div className="imm-credit-form-wrapper">
          <div className="input-block">
            <label htmlFor="name">
              {locale === "TKM"
                ? "Ady"
                : locale === "РУС"
                ? "Имя"
                : locale === "ENG"
                ? "Name"
                : "Ady"}
            </label>
            <input {...register("name")} type="text" id="name" disabled />
            {/* {errors.name && <span>{errors.name.message}</span>} */}
          </div>

          <div className="input-block">
            <label htmlFor="lastname">
              {locale === "TKM"
                ? "Familiýa"
                : locale === "РУС"
                ? "Фамилия"
                : locale === "ENG"
                ? "Lastname"
                : "Familiýa"}
            </label>
            <input
              {...register("lastname")}
              type="text"
              id="lastname"
              disabled
            />
            {/* {errors.surname && <span>{errors.surname.message}</span>} */}
          </div>

          <div className="input-block">
            <label htmlFor="surname">
              {locale === "TKM"
                ? "Atasynyň ady"
                : locale === "РУС"
                ? "Отчество"
                : locale === "ENG"
                ? "Middle name"
                : "Atasynyň ady"}
            </label>
            <input {...register("surname")} type="text" id="surname" disabled />
            {/* {errors.surname && <span>{errors.surname.message}</span>} */}
          </div>
          <div className="input-block">
            <label htmlFor="birthDate">
              {locale === "TKM"
                ? "Doglan senesi"
                : locale === "РУС"
                ? "Дата рождения"
                : locale === "ENG"
                ? "Date of birth"
                : "Doglan senesi"}
            </label>
            <input
              {...register("birthDate")}
              type="text"
              id="birthDate"
              disabled
            />
            {/* {errors.surname && <span>{errors.surname.message}</span>} */}
          </div>
          <div className="input-block">
            <label htmlFor="passport-serial">
              {locale === "TKM"
                ? "Pasportyň seriýasy"
                : locale === "РУС"
                ? "Серия паспорта"
                : locale === "ENG"
                ? "Passport Series"
                : "Pasportyň seriýasy"}
            </label>
            <input
              {...register("passportSerial")}
              type="text"
              id="passport-serial"
              disabled
            />
            {errors.passportSerial && (
              <span>{errors.passportSerial.message}</span>
            )}
          </div>
          <div className="input-block">
            <label htmlFor="passport-number">
              {locale === "TKM"
                ? "Pasportyň belgisi"
                : locale === "РУС"
                ? "Номер паспорта"
                : locale === "ENG"
                ? "Passport number"
                : "Pasportyň belgisi"}
            </label>
            <input
              {...register("passportNumber", { valueAsNumber: true })}
              type="number"
              id="passport-number"
              disabled
            />
            {errors.passportNumber && (
              <span>{errors.passportNumber.message}</span>
            )}
          </div>

          <div className="input-block">
            <label htmlFor="address">
              {locale === "TKM"
                ? "Ýaşaýan salgysy"
                : locale === "РУС"
                ? "Адрес прописки"
                : locale === "ENG"
                ? "Address of residence"
                : "Ýaşaýan salgysy"}
            </label>
            <input {...register("address")} type="text" id="address" disabled />
          </div>

          <div className="input-block">
            <label htmlFor="bank-acc">
              {locale === "TKM"
                ? "Aýlyk kartyň hasaby"
                : locale === "РУС"
                ? "Счет зарплатной карты"
                : locale === "ENG"
                ? "Salary card account"
                : "Aýlyk kartyň hasaby"}
            </label>
            <input
              {...register("bankAccount", { valueAsNumber: true })}
              type="number"
              id="bank-acc"
              disabled
            />
            {errors.bankAccount && <span>{errors.bankAccount.message}</span>}
          </div>

          <div className="input-block input-block-hidden">
            <label htmlFor="bank-acc">
              {locale === "TKM"
                ? "Aýlyk kartyň hasaby"
                : locale === "РУС"
                ? "Счет зарплатной карты"
                : locale === "ENG"
                ? "Salary card account"
                : "Aýlyk kartyň hasaby"}
            </label>
            <input
              {...register("bankAccount", { valueAsNumber: true })}
              type="number"
              id="bank-acc"
              disabled
            />
            {errors.bankAccount && <span>{errors.bankAccount.message}</span>}
          </div>

          <div className="input-block">
            <label htmlFor="workPlace">
              {locale === "TKM"
                ? "Iş ýeriňizi dolduryň"
                : locale === "РУС"
                ? "Заполните место работы"
                : locale === "ENG"
                ? "Fill the place of work"
                : "Iş ýeriňizi dolduryň"}
            </label>
            <input type="text" id="workPlace" {...register("workPlace")} />
          </div>
          <div className="input-block">
            <label htmlFor="workPosition">
              {locale === "TKM"
                ? "Wezipäňizi dolduryň"
                : locale === "РУС"
                ? "Заполните должность"
                : locale === "ENG"
                ? "Fill the position"
                : "Wezipäňizi dolduryň"}
            </label>
            <input
              type="text"
              id="workPosition"
              {...register("workPosition")}
            />
          </div>
        </div>
        <div className="cu-bottom cd-2-title">
          <button
            type="button"
            className="sign-btn reg-btn"
            onClick={() => setStage(4)}
          >
            <div>
              <div className="btn-img">
                <img src={next_reverse} alt="logout" />
              </div>
              <h3>
                {locale === "TKM"
                  ? "Yza"
                  : locale === "РУС"
                  ? "Назад"
                  : locale === "ENG"
                  ? "Back"
                  : "Yza"}
              </h3>
            </div>
          </button>
          <button
            type="button"
            className="sign-btn cu-btn"
            onClick={() => setStage(7)}
          >
            <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 GuaranterInfo;
