import * as React from 'react';
import { Checkbox, Stack } from '@fluentui/react';

// Used to add spacing between example checkboxes
const stackTokens = { childrenGap: 10 };

export const CheckboxIndeterminateExample: React.FunctionComponent = () => {
  // Only used for the controlled checkbox (the last one)
  const [isIndeterminate, setIsIndeterminate] = React.useState(true);
  const [isChecked, setIsChecked] = React.useState(false);
  const onChange = React.useCallback(
    (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, newChecked?: boolean) => {
      if (isIndeterminate) {
        // If the checkbox was indeterminate, the first click should remove the indeterminate state
        // without affecting the checked state
        setIsIndeterminate(false);
      } else {
        setIsChecked(!!newChecked);
      }
    },
    [isIndeterminate],
  );

  return (
    <Stack tokens={stackTokens}>
      <Checkbox label="Indeterminate checkbox (uncontrolled)" defaultIndeterminate />

      <Checkbox
        label="Indeterminate checkbox which defaults to true when clicked (uncontrolled)"
        defaultIndeterminate
        defaultChecked={true}
      />

      <Checkbox label="Disabled indeterminate checkbox" disabled defaultIndeterminate />

      <Checkbox
        label="Indeterminate checkbox (controlled)"
        indeterminate={isIndeterminate}
        checked={isChecked}
        onChange={onChange}
      />
    </Stack>
  );
};