import { action } from 'storybook/actions';
import { Meta, StoryObj } from '@storybook/react-webpack5';
import { useState } from 'react';

import CheckboxButton from './CheckboxButton';

export default {
  component: CheckboxButton,
  title: 'Actions/CheckboxButton',

  args: {
    disabled: false,
    onBlur: action('blur'),
    onClick: action('click'),
    onFocus: action('focus'),
  },
} satisfies Meta<typeof CheckboxButton>;

type Story = StoryObj<typeof CheckboxButton>;

export const Basic: Story = {
  args: {
    'aria-label': 'Toggle email updates',
  },
  render: (args) => {
    const [checked, setChecked] = useState(true);

    return <CheckboxButton {...args} checked={checked} onChange={() => setChecked(!checked)} />;
  },
};

/**
 * The `indeterminate` state is predominantly visual and should match the [native HTML checkbox
 * implementation](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate).
 * It is used to indicate a mixed state, where some but not all items are selected, but does not
 * change the `checked` state of the input itself – it remains either checked or unchecked.
 *
 * In the example below the 1st checkbox is unchecked and the 2nd checkbox is checked.
 */
export const Indeterminate: Story = {
  args: {
    indeterminate: true,
  },
  render: (args) => {
    const [checked1, setChecked1] = useState<boolean | undefined>(false);
    const [checked2, setChecked2] = useState<boolean | undefined>(true);

    return (
      <>
        <CheckboxButton
          {...args}
          checked={checked1}
          indeterminate={args.indeterminate}
          aria-label="Initially disabled checkbox with indeterminate state"
          onChange={() => setChecked1((current) => !current)}
        />

        <CheckboxButton
          {...args}
          checked={checked2}
          indeterminate={args.indeterminate}
          aria-label="Initially enabled checkbox with indeterminate state"
          onChange={() => setChecked2((current) => !current)}
        />
      </>
    );
  },
};
