import { Meta, StoryObj } from '@storybook/react-webpack5';
import { useState } from 'react';
import List from '../../list';
import { ListItem } from '../ListItem';
import {
  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
  SB_LIST_ITEM_MEDIA as MEDIA,
} from '../_stories/subcomponents';
import type { ListItemCheckboxProps } from './ListItemCheckbox';
import { fn } from 'storybook/test';

const meta: Meta<ListItemCheckboxProps> = {
  component: ListItem.Checkbox,
  title: 'Content/ListItem/ListItem.Checkbox',
  args: {
    checked: false,
    indeterminate: false,
    value: 'checkbox',
    name: 'checkbox',
    onChange: fn(),
    onFocus: fn(),
    onBlur: fn(),
  },
  argTypes: {
    checked: {
      control: 'boolean',
    },
    indeterminate: {
      control: 'boolean',
    },
    onChange: {
      table: {
        type: { summary: '(event: ChangeEvent<HTMLInputElement>) => void' },
      },
    },
    onFocus: {
      table: {
        type: { summary: '(event: FocusEvent<HTMLInputElement>) => void' },
      },
    },
    onBlur: {
      table: {
        type: { summary: '(event: FocusEvent<HTMLInputElement>) => void' },
      },
    },
  },
} satisfies Meta<ListItemCheckboxProps>;

export default meta;

type Story = StoryObj<ListItemCheckboxProps>;

export const Playground: Story = {
  render: (args: ListItemCheckboxProps) => {
    return (
      <List>
        <ListItem
          title="List item with checkbox"
          subtitle="Select this option"
          media={MEDIA.avatarSingle}
          control={<ListItem.Checkbox {...args} />}
          additionalInfo={INFO.nonInteractive}
        />
      </List>
    );
  },
};

/**
 * Checkbox controls demonstrate different states including checked, unchecked, and indeterminate.
 */
export const States: Story = {
  parameters: {
    controls: { disable: true },
  },
  render: function Render() {
    const [isChecked0, setisChecked0] = useState(false);
    const [isChecked1, setisChecked1] = useState(true);
    const [isChecked2, setisChecked2] = useState(false);

    return (
      <List>
        <ListItem
          control={
            <ListItem.Checkbox
              checked={isChecked0}
              onChange={() => setisChecked0((current) => !current)}
            />
          }
          title="Unchecked option"
          subtitle="This option is not selected"
          media={MEDIA.avatarSingle}
        />

        <ListItem
          control={
            <ListItem.Checkbox
              checked={isChecked1}
              onChange={() => setisChecked1((current) => !current)}
            />
          }
          title="Checked option"
          subtitle="This option is selected"
          media={MEDIA.avatarSingle}
        />

        <ListItem
          control={
            <ListItem.Checkbox
              checked={isChecked2}
              indeterminate
              onChange={() => setisChecked2((current) => !current)}
            />
          }
          title="Indeterminate option"
          subtitle="This option is partially selected"
          media={MEDIA.avatarSingle}
        />
      </List>
    );
  },
};