Waitlist field

'use client';

import * as React from 'react';
import { WaitlistField } from './waitlist-field';

// How long the pretend request takes (ms), and the address the replay types.
const WORK = 1200;
const SAMPLE = 'maya@studio.io';

function join(email: string) {
  return new Promise<{ position: number }>((resolve, reject) => {
    window.setTimeout(() => {
      if (email.endsWith('@fail.test')) reject(new Error('failed'));
      else resolve({ position: 1248 });
    }, WORK);
  });
}

/** Types into an input the way a person 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 WaitlistFieldDemo({ 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 field = () => card.current?.querySelector('form');
    for (let i = 1; i <= SAMPLE.length; i++) {
      at(300 + i * 60, () => {
        const input = field()?.querySelector('input');
        if (input) typeInto(input, SAMPLE.slice(0, i));
      });
    }
    at(300 + SAMPLE.length * 60 + 400, () => field()?.requestSubmit());
  }, [replay]);

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

  return (
    <div
      ref={card}
      className="flex w-full max-w-[480px] flex-col items-center gap-6 rounded-2xl border border-secondary bg-primary px-10 pt-10 pb-5 text-center shadow-sm"
    >
      <div className="flex flex-col gap-2">
        <h3 className="text-xl font-semibold text-primary">Lunia is coming</h3>
        <p className="text-md text-tertiary">
          Join the waitlist and we will email you when your invite is ready.
        </p>
      </div>
      <WaitlistField key={run} onSubmit={join} className="text-start" />
    </div>
  );
}