Toggle

'use client';

import * as React from 'react';
import { Toggle } from './toggle';

const STEP_MS = 450;
const INITIAL = [true, false, false, true, false, false, false, true];

export default function ToggleDemo({ replay = 0 }: { replay?: number }) {
  const [on, setOn] = React.useState(INITIAL);
  const set = (i: number) => (value: boolean) => setOn((list) => list.map((v, j) => (j === i ? value : v)));

  React.useEffect(() => {
    if (replay === 0) return;
    setOn(INITIAL);
    // Every switch that is not disabled turns over in turn, then back again.
    const order = [0, 1, 3, 4, 6, 7];
    const timers = [...order, ...order].map((i, step) =>
      window.setTimeout(() => setOn((list) => list.map((v, j) => (j === i ? !v : v))), (step + 1) * STEP_MS),
    );
    return () => {
      for (const t of timers) window.clearTimeout(t);
    };
  }, [replay]);

  return (
    <div className="flex flex-col items-center gap-10">
      <div className="grid gap-x-12 gap-y-8 sm:grid-cols-2">
        <div className="flex flex-col gap-4">
          <Toggle label="Email notifications" checked={on[0]} onCheckedChange={set(0)} />
          <Toggle
            label="Push notifications"
            supportingText="Get a message on your phone when someone mentions you."
            checked={on[1]}
            onCheckedChange={set(1)}
          />
          <Toggle label="SMS notifications" checked={on[2]} disabled />
        </div>
        <div className="flex flex-col gap-4">
          <Toggle
            type="slim"
            size="md"
            label="Email notifications"
            checked={on[3]}
            onCheckedChange={set(3)}
          />
          <Toggle
            type="slim"
            size="md"
            label="Push notifications"
            supportingText="Get a message on your phone when someone mentions you."
            checked={on[4]}
            onCheckedChange={set(4)}
          />
          <Toggle type="slim" size="md" label="SMS notifications" checked={on[5]} disabled />
        </div>
      </div>
      <div className="flex items-center gap-6">
        <Toggle size="md" aria-label="Dark mode" checked={on[6]} onCheckedChange={set(6)} />
        <Toggle type="slim" aria-label="Sounds" checked={on[7]} onCheckedChange={set(7)} />
      </div>
    </div>
  );
}