Wizard

"use client";

import {
  Children,
  createContext,
  isValidElement,
  useContext,
  useEffect,
  useRef,
  useState,
  type ComponentProps,
  type SubmitEvent,
  type ReactElement,
} from "react";
import { Button } from "./button";
import "./wizard.css";

export type WizardStepProps = ComponentProps<"fieldset"> & {
  /** Shown in the step list and as the step's legend. */
  title: string;
  /** Adds a Skip button that moves on without checking the step's fields. */
  optional?: boolean;
};

const StepContext = createContext<{ active: boolean } | null>(null);

export type WizardProps = Omit<ComponentProps<"form">, "noValidate"> & {
  /** Accessible name of the form and its step list. */
  label: string;
  /** Called on Finish with every field from every step. Without it the form submits natively. */
  onComplete?: (data: FormData) => void;
  finishLabel?: string;
  /** Zero-based index of the step shown first. Steps before it count as done. */
  defaultStep?: number;
};

const FOCUSABLE =
  'input:not([type="hidden"]):not(:disabled), select:not(:disabled), textarea:not(:disabled), button:not(:disabled), [tabindex]:not([tabindex="-1"])';

type Control = Element & { checkValidity(): boolean; reportValidity(): boolean };

function controlsOf(fieldset: HTMLFieldSetElement | undefined): Control[] {
  if (!fieldset) return [];
  return Array.from(fieldset.elements).filter((el): el is Control => "checkValidity" in el);
}

export function Wizard({
  label,
  onComplete,
  finishLabel = "Finish",
  defaultStep = 0,
  className,
  children,
  onSubmit,
  ...rest
}: WizardProps) {
  const steps = Children.toArray(children).filter(
    (child): child is ReactElement<WizardStepProps> => isValidElement(child),
  );
  const total = steps.length;
  const first = Math.min(Math.max(defaultStep, 0), Math.max(total - 1, 0));

  const [current, setCurrent] = useState(first);
  const [furthest, setFurthest] = useState(first);
  const [announcement, setAnnouncement] = useState("");
  const form = useRef<HTMLFormElement>(null);
  const moved = useRef(false);
  const pendingReport = useRef(false);

  const fieldsets = () =>
    Array.from(form.current?.querySelectorAll<HTMLFieldSetElement>(":scope > .eq-wizard-body > .eq-wizard-step") ?? []);

  function isValid(index: number) {
    return controlsOf(fieldsets()[index]).every((control) => control.checkValidity());
  }

  function show(index: number, report = false) {
    moved.current = true;
    pendingReport.current = report;
    setCurrent(index);
    setFurthest((value) => Math.max(value, index));
    setAnnouncement(`Step ${index + 1} of ${total}: ${steps[index]?.props.title ?? ""}`);
  }

  function goTo(target: number) {
    if (target === current) return;
    if (target < current) return show(target);
    for (let index = current; index < target; index++) {
      if (!isValid(index)) {
        if (index === current) controlsOf(fieldsets()[index]).find((c) => !c.checkValidity())?.reportValidity();
        else show(index, true);
        return;
      }
    }
    show(target);
  }

  useEffect(() => {
    if (!moved.current) return;
    moved.current = false;
    const fieldset = fieldsets()[current];
    if (!fieldset) return;
    if (pendingReport.current) {
      pendingReport.current = false;
      const invalid = controlsOf(fieldset).find((control) => !control.checkValidity());
      if (invalid) return void invalid.reportValidity();
    }
    const target =
      fieldset.querySelector<HTMLElement>(FOCUSABLE) ??
      fieldset.querySelector<HTMLElement>(".eq-wizard-legend");
    target?.focus();
  }, [current]);

  function handleSubmit(event: SubmitEvent<HTMLFormElement>) {
    onSubmit?.(event);
    if (event.defaultPrevented) return;
    const invalid = controlsOf(fieldsets()[current]).find((control) => !control.checkValidity());
    if (invalid) {
      event.preventDefault();
      invalid.reportValidity();
      return;
    }
    if (current < total - 1) {
      event.preventDefault();
      show(current + 1);
      return;
    }
    if (onComplete) {
      event.preventDefault();
      onComplete(new FormData(event.currentTarget));
    }
  }

  const last = current === total - 1;
  const optional = steps[current]?.props.optional && !last;

  return (
    <form
      {...rest}
      ref={form}
      noValidate
      aria-label={label}
      className={["eq-wizard", className].filter(Boolean).join(" ")}
      onSubmit={handleSubmit}
    >
      <ol className="eq-wizard-steps" aria-label={`${label} steps`}>
        {steps.map((step, index) => {
          const state = index === current ? "current" : index < furthest ? "done" : index === furthest ? "reached" : "upcoming";
          const body = (
            <>
              <span className="eq-wizard-marker" aria-hidden="true">
                {state === "done" ? (
                  <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="m2.5 6.2 2.3 2.3 4.7-5" />
                  </svg>
                ) : (
                  index + 1
                )}
              </span>
              <span className="eq-wizard-name">
                {step.props.title}
                {state === "done" && <span className="eq-wizard-sr">, done</span>}
              </span>
            </>
          );
          return (
            <li
              key={step.key ?? index}
              className="eq-wizard-item"
              data-state={state}
              aria-current={index === current ? "step" : undefined}
            >
              {state === "done" || state === "reached" ? (
                <button type="button" className="eq-wizard-jump" onClick={() => goTo(index)}>
                  {body}
                </button>
              ) : (
                <span className="eq-wizard-jump">{body}</span>
              )}
            </li>
          );
        })}
      </ol>

      <div className="eq-wizard-body">
        {steps.map((step, index) => (
          <StepContext.Provider key={step.key ?? index} value={{ active: index === current }}>
            {step}
          </StepContext.Provider>
        ))}
      </div>

      <p className="eq-wizard-sr" aria-live="polite">
        {announcement}
      </p>

      <div className="eq-wizard-actions">
        <Button
          variant="ghost"
          className="eq-wizard-back"
          disabled={current === 0}
          onClick={() => show(current - 1)}
        >
          Back
        </Button>
        {optional && (
          <Button variant="ghost" onClick={() => show(current + 1)}>
            Skip
          </Button>
        )}
        <Button type="submit" variant={last ? "accent" : "solid"}>
          {last ? finishLabel : "Next"}
        </Button>
      </div>
    </form>
  );
}

export function WizardStep({ title, optional, className, children, ...rest }: WizardStepProps) {
  const context = useContext(StepContext);
  return (
    <fieldset
      {...rest}
      hidden={context ? !context.active : rest.hidden}
      className={["eq-wizard-step", className].filter(Boolean).join(" ")}
    >
      <legend className="eq-wizard-legend" tabIndex={-1}>
        {title}
        {optional && <span className="eq-wizard-optional">Optional</span>}
      </legend>
      {children}
    </fieldset>
  );
}