import { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';

import { Field } from '../field/Field';
import { lorem10, storyConfig } from '../test-utils';

import Checkbox from './Checkbox';

export default {
  component: Checkbox,
  title: 'Forms/Checkbox',
  args: {
    label: 'This is the label',
    onChange: fn(),
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Checkbox>;

type Story = StoryObj<typeof Checkbox>;

export const Basic: Story = {};

export const Multiple: Story = storyConfig(
  {
    render: (args) => {
      return (
        <>
          <Checkbox {...args} />
          <Checkbox {...args} checked />
          <Checkbox {...args} label={lorem10} />
          <Checkbox {...args} label={lorem10} secondary={lorem10} />
          <Checkbox {...args} disabled />
        </>
      );
    },
  },
  { variants: ['default', 'dark', 'rtl'] },
);

export const MultipleMobile: Story = storyConfig(Multiple, {
  variants: ['default', 'dark', 'rtl', 'mobile'],
});

export const WithinField = {
  decorators: [
    (Story) => (
      <Field message="Something went wrong" sentiment="negative">
        <Story />
      </Field>
    ),
  ],
} satisfies Story;
