Theme toggle

'use client';

import * as React from 'react';
import { ThemeToggle } from './theme-toggle';
import { resolveTheme, subscribeSystemTheme, systemTheme, type ThemeValue } from './theme-toggle-core';

/** The demo themes its own small page, so it never changes the theme of the site around it. */
export default function ThemeToggleDemo({ replay = 0 }: { replay?: number }) {
  const [theme, setTheme] = React.useState<ThemeValue>('system');
  const system = React.useSyncExternalStore(subscribeSystemTheme, systemTheme, () => 'light' as const);
  const page = React.useRef<HTMLDivElement>(null);
  const resolved = resolveTheme(theme, system);

  React.useEffect(() => {
    if (replay === 0) return;
    const click = (selector: string) => page.current?.querySelector<HTMLElement>(selector)?.click();
    const timers = [
      window.setTimeout(() => click('[data-variant="icon"] button'), 400),
      window.setTimeout(() => click('[data-variant="icon"] button'), 1800),
      window.setTimeout(() => click('[role="radio"][aria-label="System"]'), 3200),
    ];
    return () => {
      for (const timer of timers) window.clearTimeout(timer);
    };
  }, [replay]);

  return (
    <div
      ref={page}
      className={`${resolved} w-[560px] max-w-full overflow-hidden rounded-2xl border border-secondary bg-primary shadow-xs`}
    >
      <div className="flex flex-wrap items-center justify-between gap-lg border-b border-secondary px-xl py-lg">
        <span className="text-sm font-semibold text-primary">Settings</span>
        <div className="flex items-center gap-md">
          <ThemeToggle data-variant="icon" variant="icon" value={theme} onValueChange={setTheme} />
          <ThemeToggle data-variant="pill" variant="pill" value={theme} onValueChange={setTheme} />
          <ThemeToggle data-variant="segmented" variant="segmented" value={theme} onValueChange={setTheme} />
        </div>
      </div>
      <div className="flex flex-col gap-xs px-xl py-2xl">
        <p className="text-sm font-medium text-primary">Appearance</p>
        <p className="text-sm text-tertiary">
          This small page follows the toggles. System uses your device setting.
        </p>
      </div>
    </div>
  );
}