// 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 { UserContext } from "../../backend/UserContext";
// 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 BorrowerInfo = ({
  setStage,
  isGuranter,
  borrowerData,
  setRecipientWorkPlace,
  setRecipientWorkPosition,
  recipientWorkPlace,
  recipientWorkPosition,
}) => {
  const { locale } = useContext(LanguageContext);
  const { user } = useContext(UserContext);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    // resolver: zodResolver(schema),
    defaultValues: {
      name: borrowerData.name ? borrowerData.name : "Loading",
      surname: borrowerData.surname ? borrowerData.surname : "loading",
      lastname: borrowerData.lastname ? borrowerData.lastname : "loading",
      passportSerial: borrowerData.idSeria ? borrowerData.idSeria : "Loading",
      passportNumber: borrowerData.idNo ? borrowerData.idNo : "Loading",
      bankAccount: borrowerData.accountNo ? borrowerData.accountNo : "Loading",
      birthDate: borrowerData.birthDate ? borrowerData.birthDate : "Loading",
      address: borrowerData.address ? borrowerData.address : "Loading",
      phoneNumber: user.mobile_phone,
    },
  });

  const handleWorkPlace = (e) => {
    setRecipientWorkPlace(e.target.value);
  };
  const handleWorkPosition = (e) => {
    setRecipientWorkPosition(e.target.value);
  };

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

  return borrowerData ? (
    <section className="imm-cs-1 cs-1">
      <form onSubmit={handleSubmit(onSubmit)}>
        <h2 className="cs-2-title">
          {locale === "TKM"
            ? "Görkezilen maglumatlary tassyklaň, eger-de görkezilen maglumatlar nädogry bolsa ýa-da doldurylmadyk meýdançalar bar bolsa, bank bilen habarlaşyň!"
            : locale === "РУС"
            ? "Подтвердите указанные данные. В случае, если данные не верны или есть незаполненные поля, просим обратиться в Банк!"
            : locale === "ENG"
            ? "Confirm the provided information. If the data is incorrect or there are blank fields, please contact the Bank!"
            : "Görkezilen maglumatlary tassyklaň, eger-de görkezilen maglumatlar nädogry bolsa ýa-da doldurylmadyk meýdançalar bar 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ýasy"
                : locale === "РУС"
                ? "Фамилия"
                : locale === "ENG"
                ? "Lastname"
                : "Familiýasy"}
            </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"
                ? "Pasport seriýasy"
                : locale === "РУС"
                ? "Серия паспорта"
                : locale === "ENG"
                ? "Passport Series"
                : "Pasport 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"
                ? "Pasport belgisi"
                : locale === "РУС"
                ? "Номер паспорта"
                : locale === "ENG"
                ? "Passport number"
                : "Pasport 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">
            <label htmlFor="phone-number">
              {locale === "TKM"
                ? "Telefon belgisi"
                : locale === "РУС"
                ? "Номер телефона"
                : locale === "ENG"
                ? "Phone number"
                : "Telefon belgisi"}
            </label>
            <input
              disabled
              type="text"
              id="phone-number"
              {...register("phoneNumber")}
            />

            {errors.phoneNumber && <span>{errors.phoneNumber.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ň"}
              <span> *</span>
            </label>
            <input
              type="text"
              id="workPlace"
              required={true}
              onChange={handleWorkPlace}
              value={recipientWorkPlace}
            />
          </div>
          <div className="input-block">
            <label htmlFor="workPosition">
              {locale === "TKM"
                ? "Wezipäňizi dolduryň"
                : locale === "РУС"
                ? "Заполните должность"
                : locale === "ENG"
                ? "Fill the position"
                : "Wezipäňizi dolduryň"}
              <span> *</span>
            </label>
            <input
              type="text"
              id="workPosition"
              required={true}
              onChange={handleWorkPosition}
              value={recipientWorkPosition}
            />
          </div>
        </div>

        <div className="cu-bottom cd-2-title">
          <button
            type="button"
            className="sign-btn reg-btn"
            onClick={() => setStage(1)}
          >
            <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"
            disabled={
              recipientWorkPosition.length < 3 || recipientWorkPlace.length < 3
                ? true
                : false
            }
            className="sign-btn cu-btn"
            onClick={() => (isGuranter ? setStage(4) : 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>
  ) : (
    "Loading"
  );
};

export default BorrowerInfo;
