import { useState } from 'react';
import { Checkbox } from './Checkbox';
import { Stack } from '../Stack/Stack';

export function Basic() {
  return (
    <Stack gap="sm">
      <Checkbox label="Email me about outages" defaultChecked />
      <Checkbox
        label="Automatic deployments"
        description="Deploy every push to the main branch."
      />
      <Checkbox label="Unavailable on your plan" disabled />
    </Stack>
  );
}

export function WithError() {
  return (
    <Stack gap="2xs">
      <Checkbox label="I accept the terms of service" invalid />
      <span style={{ color: 'var(--ds-color-danger-text)', fontSize: 'var(--ds-text-sm)' }}>
        You must accept the terms to continue.
      </span>
    </Stack>
  );
}

/** The parent reflects "some but not all" via `indeterminate`. */
export function SelectAll() {
  const [checked, setChecked] = useState([true, false, false]);
  const allChecked = checked.every(Boolean);
  const someChecked = checked.some(Boolean);

  return (
    <Stack gap="xs">
      <Checkbox
        label="All environments"
        checked={allChecked}
        indeterminate={someChecked && !allChecked}
        onChange={(event) => setChecked(checked.map(() => event.target.checked))}
      />
      <Stack gap="xs" style={{ paddingLeft: 'var(--ds-space-lg)' }}>
        {['Production', 'Staging', 'Preview'].map((name, index) => (
          <Checkbox
            key={name}
            label={name}
            checked={checked[index]}
            onChange={(event) =>
              setChecked(checked.map((value, i) => (i === index ? event.target.checked : value)))
            }
          />
        ))}
      </Stack>
    </Stack>
  );
}