import { FormProvider, useForm } from 'react-hook-form';

import { Stack } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import FormCheckbox from './form';
import CustomCheckbox from '.';

const meta: Meta<typeof CustomCheckbox> = {
  component: CustomCheckbox,
  title: 'Design System/Checkbox/Checkbox',
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text' },
    labelTooltip: { control: 'text' },
    description: { control: 'text' },
    extraInfo: { control: 'text' },
    error: { control: 'boolean' },
    checked: { control: 'boolean' },
    disabled: { control: 'boolean' },
    readOnly: { control: 'boolean' },
    indeterminate: { control: 'boolean' },
    onChange: { control: false },
    onClick: { control: false },
    inputRef: { control: false },
    sx: { control: false },
    slotProps: { control: false },
  },
};

export default meta;

type Story = StoryObj<typeof CustomCheckbox>;

export const WithExtraInfo: Story = {
  args: { label: 'Label', description: 'Description', extraInfo: 'Extra Info' },
};

export const OnlyLabel: Story = { args: { label: 'Label' } };

export const Disabled: Story = {
  args: {
    label: 'Label',
    description: 'Description',
    disabled: true,
    checked: true,
  },
};

export const Error: Story = {
  args: { label: 'Label', description: 'Description', error: true },
};

export const Indeterminate: Story = {
  args: { label: 'Label', description: 'Description', indeterminate: true },
};

export const ReadOnly: Story = {
  args: {
    label: 'Label',
    description: 'Description',
    checked: true,
    readOnly: true,
  },
  parameters: {
    docs: {
      description: {
        story:
          'Renders the checkbox as purely presentational. The consumer fully owns state from outside (typically a wrapping clickable surface like a card or row). Under `readOnly`:\n\n- The checkbox square has `pointer-events: none`, so direct clicks fall through to the parent.\n- The native `<label htmlFor>` association is preserved (so the label is still announced as the accessible name), but the input intercepts its own click with `event.stopPropagation()` to neutralize the browser-synthesized click that fires when the label is clicked — preventing the double-toggle of the parent.\n- The input is removed from the tab order (`tabIndex={-1}`) and announced as `aria-readonly`.\n- `checked` and `onChange` still pass through untouched — the parent drives `checked` via props.\n\nUse `disabled` for "not applicable / unavailable" (greyed out). Use `readOnly` for "value shown, not directly editable here" (full-color).',
      },
    },
  },
};

export const WithLabelTooltip: Story = {
  args: {
    label: 'Label',
    labelTooltip: 'Label Tooltip',
    description: 'Description',
  },
};

export const FormCheckboxStory: Story = {
  render: () => {
    const form = useForm({ defaultValues: { item1: true, item2: false } });
    const { item1, item2 } = form.watch();
    return (
      <FormProvider {...form}>
        <FormCheckbox
          checkBoxProps={{
            label: 'Option1',
            description: 'Description',
            checked: item1 && item2,
            indeterminate: item1 !== item2,
            onChange: e => {
              form.setValue('item1', e.target.checked);
              form.setValue('item2', e.target.checked);
            },
          }}
          name="option1"
        />
        <Stack sx={{ pl: 1 }}>
          <FormCheckbox
            checkBoxProps={{ label: 'Item1', description: 'Description' }}
            name="item1"
          />
          <FormCheckbox
            checkBoxProps={{ label: 'Item2', description: 'Description' }}
            name="item2"
          />
        </Stack>
      </FormProvider>
    );
  },
};
