import { faker } from '@faker-js/faker';
import { action } from '@storybook/addon-actions';
import { Meta, StoryObj } from '@storybook/react';
import React, { useState } from 'react';
import { createGroups } from '../../../helpers/storybook';
import { ToggleButton } from './ToggleButton';

const groups = createGroups({
  Behavior: [
    'type',
    'disabled',
    'inlineMode',
    'name',
    'id',
    'showONOFFText',
    'dataTestId',
    'confirmationMode',
    'confirmationConfig',
  ],
  Content: ['label', 'error', 'tooltipContent', 'value'],
  Styling: ['className', 'width', 'height'],
  Events: ['onButtonClicked', 'onBlur'],
});

const meta: Meta<typeof ToggleButton> = {
  title: 'Primary Components/Form Elements/ToggleButton',
  component: ToggleButton,
};
export default meta;

export const Main: StoryObj<typeof ToggleButton> = {
  argTypes: {
    ...groups,
  },
  args: {
    label: 'My Feature',
    tooltipContent: faker.lorem.sentences(4),
    name: 'myFeature',
    value: false,
  },
  render: (args) =>
    React.createElement(() => {
      const [value, setValue] = useState(args.value);

      return (
        <ToggleButton
          {...args}
          value={value}
          onButtonClicked={(event, value) => {
            action('onButtonClicked')(event, value);
            setValue(value);
          }}
        />
      );
    }),
};
