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

import { Field } from '../field/Field';

import Checkbox from './Checkbox';
import { withVariantConfig } from '../../.storybook/helpers';
import { lorem10 } from '../test-utils';

const meta: Meta<typeof Checkbox> = {
  component: Checkbox,
  title: 'Forms/Checkbox',
  args: {
    label: 'This is the label',
    onChange: fn(),
  },
};
export default meta;

type Story = StoryObj<typeof Checkbox>;

export const Basic: Story = {};

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

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