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

import CheckboxButton from './CheckboxButton';

export default {
  component: CheckboxButton,
  title: 'Actions/CheckboxButton',
  tags: ['autodocs'],
  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) => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [checked, setChecked] = useState(true);

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

export const Indeterminate: Story = {
  args: {
    'aria-label': 'Group checkbox with indeterminate state',
    indeterminate: true,
  },
  render: (args) => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [indeterminate, setIndeterminate] = useState(true);

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