"use client";

/* eslint-disable react/display-name */
import { forwardRef } from "react";
import useDigitInput, { InputAttributes } from "react-digit-input";
import styles from "./DigitInput.module.css";

const DigitInputElement = forwardRef<
  HTMLInputElement,
  Omit<InputAttributes, "ref"> & {
    autoFocus?: boolean;
  }
>(({ ...props }, ref): any => (
  <>
    <input
      aria-label="verification code"
      className={styles.input}
      {...props}
      ref={ref}
      inputMode="decimal"
    />
  </>
));

const DigitSeparator = forwardRef<
  HTMLInputElement,
  Omit<InputAttributes, "ref"> & {
    autoFocus?: boolean;
  }
>(
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  ({ ...props }, ref): any => (
    <>
      <span className={styles.hyphen} ref={ref} />
    </>
  )
);

export const SixDigitInput = ({ value, onChange }: any) => {
  const digits = useDigitInput({
    acceptedCharacters: /^\d$/,
    length: 6,
    value,
    onChange,
  });
  return (
    <div>
      <div className={styles.group}>
        <DigitInputElement autoFocus {...digits[0]} />
        <DigitInputElement {...digits[1]} />
        <DigitInputElement {...digits[2]} />
        <DigitSeparator />
        <DigitInputElement {...digits[3]} />
        <DigitInputElement {...digits[4]} />
        <DigitInputElement {...digits[5]} />
      </div>
      <pre hidden>
        <code>{value}</code>
      </pre>
    </div>
  );
};