Checkbox

'use client';

import * as React from 'react';
import { Checkbox } from './checkbox';

const STEP_MS = 400;
const CHILDREN = ['Comments', 'Mentions', 'Direct messages'];
// Comments, Mentions, Direct messages, Product updates, terms
const INITIAL = [true, false, true, true, false];

export default function CheckboxDemo({ 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)));
  const children = on.slice(0, 3);
  const all = children.every(Boolean);
  const some = children.some(Boolean);

  React.useEffect(() => {
    if (replay === 0) return;
    setOn(INITIAL.map(() => false));
    // Every box is checked again, one after the other.
    const timers = INITIAL.map((_, i) =>
      window.setTimeout(() => setOn((list) => list.map((v, j) => (j === i ? true : v))), (i + 1) * STEP_MS),
    );
    return () => {
      for (const t of timers) window.clearTimeout(t);
    };
  }, [replay]);

  return (
    <div className="grid gap-x-12 gap-y-8 sm:grid-cols-2">
      <div className="flex flex-col gap-3">
        <Checkbox
          label="All notifications"
          checked={all}
          indeterminate={some && !all}
          onCheckedChange={() => setOn((list) => list.map((v, j) => (j < 3 ? !all : v)))}
        />
        <div className="flex flex-col gap-3 ps-6">
          {CHILDREN.map((label, i) => (
            <Checkbox key={label} label={label} checked={on[i]} onCheckedChange={set(i)} />
          ))}
        </div>
      </div>
      <div className="flex flex-col gap-4">
        <Checkbox
          size="md"
          label="Product updates"
          supportingText="News about features and changes."
          checked={on[3]}
          onCheckedChange={set(3)}
        />
        <Checkbox size="md" label="Weekly summary" checked disabled />
        <Checkbox
          size="md"
          label="I accept the terms"
          supportingText={on[4] ? 'You can read the terms at any time.' : 'Check this box to continue.'}
          invalid={!on[4]}
          required
          checked={on[4]}
          onCheckedChange={set(4)}
        />
      </div>
    </div>
  );
}