Steps form

'use client';

import * as React from 'react';
import { Button } from '../button/button';
import { Input } from '../input/input';
import { RadioGroup, RadioGroupItem } from '../radio-group/radio-group';
import { type FormStep, StepsForm } from './steps-form';

// How long the pretend checks take (ms).
const CHECK = 600;
const SUBMIT = 1000;
const wait = (ms: number) => new Promise((resolve) => window.setTimeout(resolve, ms));

/** Changes an input the way typing 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 }));
}

function DoneIcon() {
  return (
    <span className="flex size-10 items-center justify-center rounded-full bg-success-secondary text-fg-success-primary">
      <svg aria-hidden="true" viewBox="0 0 20 20" fill="none" className="size-5">
        <path
          d="m6.25 10 2.5 2.5 5-5m4.583 2.5a8.333 8.333 0 1 1-16.666 0 8.333 8.333 0 0 1 16.666 0Z"
          stroke="currentColor"
          strokeWidth="1.67"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </span>
  );
}

function PlanName({ name, price }: { name: string; price: string }) {
  return (
    <>
      {name} <span className="font-normal text-tertiary">{price}</span>
    </>
  );
}

function Workspace({ replay }: { replay: number }) {
  const [name, setName] = React.useState('');
  const [nameMissing, setNameMissing] = React.useState(false);
  const [plan, setPlan] = React.useState('free');
  const [invite, setInvite] = React.useState('');
  const card = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    if (replay === 0) return;
    const timers: number[] = [];
    const at = (ms: number, step: () => void) => timers.push(window.setTimeout(step, ms));
    const form = () => card.current?.querySelector('form');
    const field = () => form()?.querySelector<HTMLInputElement>('[data-slot="step"] input');
    at(400, () => form()?.requestSubmit());
    at(1700, () => {
      const el = field();
      if (el) typeInto(el, 'Northwind');
    });
    at(2400, () => form()?.requestSubmit());
    at(3800, () => form()?.querySelectorAll<HTMLElement>('[data-slot="step"] [role="radio"]')[1]?.click());
    at(4500, () => form()?.requestSubmit());
    at(5600, () => form()?.requestSubmit());
    return () => {
      for (const timer of timers) window.clearTimeout(timer);
    };
  }, [replay]);

  const steps: FormStep[] = [
    {
      id: 'name',
      label: 'Name',
      title: 'Name your workspace',
      description: 'You can change the name later.',
      content: (
        <Input
          size="sm"
          label="Workspace name"
          placeholder="For example, Northwind"
          value={name}
          invalid={nameMissing}
          onValueChange={(next) => {
            setName(next);
            setNameMissing(false);
          }}
        />
      ),
      validate: async () => {
        await wait(CHECK);
        setNameMissing(!name.trim());
        return name.trim() ? null : 'Enter a workspace name.';
      },
    },
    {
      id: 'plan',
      label: 'Plan',
      title: 'Choose a plan',
      description: 'You can change your plan at any time.',
      content: (
        <RadioGroup type="radio-button" aria-label="Plan" value={plan} onValueChange={setPlan}>
          <RadioGroupItem
            value="free"
            label={<PlanName name="Free" price="$0" />}
            supportingText="For one person and up to 3 projects."
          />
          <RadioGroupItem
            value="team"
            label={<PlanName name="Team" price="$12 per user" />}
            supportingText="Shared projects and roles for the whole team."
          />
        </RadioGroup>
      ),
    },
    {
      id: 'invite',
      label: 'Invite',
      title: 'Invite your team',
      description: 'This step is optional. You can invite people later.',
      content: (
        <Input
          size="sm"
          type="email"
          label="Email"
          placeholder="name@company.com"
          value={invite}
          onValueChange={setInvite}
        />
      ),
    },
  ];

  return (
    <div ref={card} className="flex w-full justify-center">
      <StepsForm
        steps={steps}
        onSubmit={() => wait(SUBMIT)}
        done={
          <div className="flex flex-col items-start gap-4">
            <DoneIcon />
            <div className="flex flex-col gap-1">
              <p className="text-lg font-semibold text-primary">Your workspace is ready</p>
              <p className="text-sm text-tertiary">
                {name.trim() || 'Your workspace'} is set up. You can invite more people at any time.
              </p>
            </div>
            <Button size="sm" hierarchy="secondary">
              Open workspace
            </Button>
          </div>
        }
      />
    </div>
  );
}

export default function StepsFormDemo({ replay = 0 }: { replay?: number }) {
  // A new key starts the form again at step 1 for every replay.
  return <Workspace key={replay} replay={replay} />;
}