Code input

'use client';

import * as React from 'react';
import { CodeInput } from './code-input';

// The pretend server accepts this code after a short wait (ms).
const RIGHT = '424242';
const CHECK = 900;

function verify(code: string) {
  return new Promise<boolean>((resolve) => window.setTimeout(() => resolve(code === RIGHT), CHECK));
}

function resend() {
  return new Promise<void>((resolve) => window.setTimeout(resolve, 800));
}

/** Changes the input the way typing or pasting would, so the component sees normal input events. */
function typeInto(input: HTMLInputElement, value: string) {
  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
  setter?.call(input, value);
  input.dispatchEvent(new Event('input', { bubbles: true }));
}

export default function CodeInputDemo({ replay = 0 }: { replay?: number }) {
  const [run, setRun] = React.useState(0);
  const card = React.useRef<HTMLDivElement>(null);
  const timers = React.useRef<number[]>([]);

  React.useEffect(() => {
    if (replay === 0) return;
    for (const timer of timers.current) window.clearTimeout(timer);
    timers.current = [];
    setRun((n) => n + 1);
    const at = (ms: number, step: () => void) => timers.current.push(window.setTimeout(step, ms));
    const input = () => card.current?.querySelector('input');
    at(250, () => input()?.focus());
    // Type a wrong code one digit at a time, then paste the right one once the boxes have cleared.
    for (let i = 1; i <= 6; i++) {
      at(300 + i * 150, () => {
        const el = input();
        if (el) typeInto(el, '123456'.slice(0, i));
      });
    }
    at(3600, () => {
      const el = input();
      if (el) typeInto(el, RIGHT);
    });
  }, [replay]);

  React.useEffect(
    () => () => {
      for (const timer of timers.current) window.clearTimeout(timer);
    },
    [],
  );

  return (
    <div
      ref={card}
      className="flex w-full max-w-[400px] flex-col gap-6 rounded-2xl border border-secondary bg-primary p-8 shadow-sm"
    >
      <div className="flex flex-col gap-1">
        <h3 className="text-lg font-semibold text-primary">Check your email</h3>
        <p className="text-sm text-tertiary">We sent a 6-digit code to maya@studio.io.</p>
      </div>
      <CodeInput key={run} groups={[3, 3]} onComplete={verify} onResend={resend} />
    </div>
  );
}