// 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({
  code: z.string().min(1),
  // surname: z.string().min(1),
});

const CardDetails = ({ setStage, cardDetails, setCardDetails }) => {
  const { locale } = useContext(LanguageContext);

  const handleCardDetails = (e) => {
    setCardDetails(e.target.value);
  };

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(schema),
  });

  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"
            ? "Karzyň kalkulýatory"
            : locale === "РУС"
            ? "Введите номер карты"
            : locale === "ENG"
            ? "Loan calculator"
            : "Karzyň kalkulýatory"}
        </h2>
        <div className="imm-credit-form-wrapper">
          <div className="input-block">
            <label htmlFor="code">
              {locale === "TKM"
                ? "Ady"
                : locale === "РУС"
                ? "Номер карты"
                : locale === "ENG"
                ? "amount"
                : "Ady"}
            </label>
            <input
              value={cardDetails}
              onChange={handleCardDetails}
              type="text"
              id="code"
              placeholder="6435980023168745"
            />
            <span className="another-option">Оформить карту</span>
            {/* {errors.code && <span>{errors.code.message}</span>} */}
          </div>
        </div>
        <div className="cu-bottom cd-2-title">
          <button
            type="button"
            className="sign-btn reg-btn"
            onClick={() => setStage(9)}
          >
            <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
            disabled={cardDetails.length !== 16 ? true : false}
            type="button"
            className="sign-btn cu-btn"
            onClick={() => setStage(10)}
          >
            <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 CardDetails;
