import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'

import { FocusVisibleProvider } from '../_utils/focusVisibleProvider'
import { BASIC } from '../_utils/taxonomy'
import { LadyIcon } from '../icon/ladyIcon'
import { ItemCheckbox, ItemCheckboxStatus } from '../itemCheckbox'

<Meta title={`${BASIC}/Items Choice/ItemCheckbox`} />

# ItemCheckbox

<Canvas>
  <Story name="With secondary label">
    <FocusVisibleProvider>
      <ItemCheckbox
        name="InputName"
        labelTitle="Label title"
        label="Main information"
        data="Data"
        dataInfo="Data info"
        checked
        disabled={false}
        leftAddon={<LadyIcon isDisabled={false} />}
        status={ItemCheckboxStatus.DEFAULT}
      />
    </FocusVisibleProvider>
  </Story>
</Canvas>

<Canvas>
  <Story name="Without secondary label">
    <FocusVisibleProvider>
      <ItemCheckbox
        name="InputName"
        labelTitle="Label title"
        data="Data"
        dataInfo="Data info"
        checked
        disabled={false}
        leftAddon={<LadyIcon isDisabled={false} />}
        status={ItemCheckboxStatus.DEFAULT}
      />
    </FocusVisibleProvider>
  </Story>
</Canvas>

# Disabled

<Canvas>
  <Story name="Disabled">
    <ItemCheckbox
      name="InputName"
      labelTitle="Label title"
      label="Main information"
      data="Data"
      dataInfo="Data info"
      checked
      disabled
      leftAddon={<LadyIcon isDisabled />}
      status={ItemCheckboxStatus.DEFAULT}
    />
  </Story>
</Canvas>

## Specifications

### Normal state

We use these Items when the user can choose more than one option before validating a choice.
These components can also be used when there's a secondary question on a flow step that's doesn't require it's own step (ex. Terms and conditions). These cases should be exceptions though.

### Long texts

There is no limitation on the number of lines. When the text is long, icons and checkboxes are centred in height.

## Usage

```jsx
import { ItemCheckbox } from '@blablacar/ui-library/build/itemCheckItemCheckbox'

<ItemCheckbox
  name="InputName"
  leftAddon={<LadyIcon isDisabled={disabled} />}
  labelTitle='Title'
  label='Subtilte: secondary information'
  data='Data'
  dataInfo='Data info'
  onChange={() => 'changed')}
  checked={true}
  disabled={false}
  status={ItemCheckboxStatus.LOADING}
/>
```

<ArgsTable of={ItemCheckbox} />