/* eslint-disable jsx-a11y/no-autofocus */
/* eslint-disable no-console */
/* eslint-disable react-hooks/rules-of-hooks */
import Image from "next/image";
import React, { useRef } from "react";
import { useForm } from "react-hook-form";

import type { FormHandles } from "@/components/form/form";
import Form from "@/components/form/form";
import FormItem from "@/components/form/form-item";
import { Button } from "@/components/ui/button/button";
import { useLocale } from "@/hooks/useLocale";

import CountdownTimer from "../count-down-timer/count-down-timer";

interface FormType {
  digit1: string;
  digit2: string;
  digit3: string;
  digit4: string;
  digit5: string;
  digit6: string;
}

export interface OtpModalProps {
  onSubmit: (values: string) => void;
  onResendButton: () => void;
}

const OtpModal = (props: OtpModalProps) => {
  const methods = useForm<FormType>();
  const formRef = useRef<FormHandles>(null);
  const { t } = useLocale();
  const digitRefs = Array.from({ length: 6 }, () =>
    useRef<HTMLInputElement>(null),
  );

  const handleDigitChange = (index: number, value: string) => {
    if (index === 5) {
      formRef.current?.submit();
    }
    const nextDigitRef = digitRefs[index + 1];
    if (nextDigitRef && nextDigitRef.current && index < 5 && value !== "") {
      nextDigitRef.current?.focus();
    }
  };

  const handleBackspace = (index: number) => {
    const prevDigitRef = digitRefs[index - 1];
    if (index > 0 && prevDigitRef && prevDigitRef.current) {
      prevDigitRef.current.focus();
    }
  };

  return (
    <Form
      ref={formRef}
      methods={methods}
      mode="onSubmit"
      onSubmit={(values: FormType) =>
        props.onSubmit(Object.values(values).join(""))
      }
    >
      <div className="flex w-[504px] flex-col items-center justify-center gap-6">
        <div className="flex w-[312px] flex-col justify-center gap-6">
          <div className="flex gap-2">
            {[...Array(6)].map((_, index) => (
              <div key={+index}>
                <FormItem name={`digit${index + 1}`}>
                  {({ field, setValue }) => (
                    <input
                      {...field}
                      ref={digitRefs[index]}
                      type="text"
                      maxLength={1}
                      autoFocus={index === 0}
                      onChange={(e) => {
                        field.onChange(e);
                        setValue(e.target.value);
                        handleDigitChange(index, e.target.value);
                      }}
                      onKeyDown={(e) => {
                        if (e.key === "Backspace") {
                          setValue("");
                          e.preventDefault();
                          handleBackspace(index);
                        }
                      }}
                      className="size-11 cursor-pointer rounded border border-gray-300 text-center"
                    />
                  )}
                </FormItem>
              </div>
            ))}
          </div>
          <CountdownTimer
            onResendButton={() => {
              props.onResendButton();
            }}
          />
        </div>
        <div className="flex w-full justify-between">
          <figure className="size-full">
            <Image
              src="/assets/images/masterpass-logo.png"
              alt="chip"
              width={154}
              height={10}
            />
          </figure>
          <Button
            className="min-w-[220px]"
            disabled={!methods.watch("digit6")}
            type="submit"
            size="xl"
            variant="primary"
          >
            {t("Verify")}
          </Button>
        </div>
      </div>
    </Form>
  );
};

export { OtpModal };