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

import { FocusVisibleProvider } from '../_utils/focusVisibleProvider'
import { BASIC } from '../_utils/taxonomy'
import { ColorIcon } from '../icon/colorIcon'
import { ComfortIcon } from '../icon/comfortIcon'
import { LadyIcon } from '../icon/ladyIcon'
import { ItemRadioGroup } from '../itemRadioGroup'
import { ItemRadio, ItemRadioStatus } from './index'

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

# **ItemRadio**

<Canvas>
  <Story name="With secondary label">
    <FocusVisibleProvider>
      <ItemRadioGroup onChange={action('group changed')}>
        <ItemRadio
          name2="inputName"
          value="InputValue"
          leftAddon={<LadyIcon />}
          labelTitle="Label title"
          label="Main information"
          data="Data"
          dataInfo="Data info"
          checked={false}
          disabled={false}
          status={ItemRadioStatus.DEFAULT}
        />
        <ItemRadio
          name2="InputName2"
          value="InputValue2"
          leftAddon={<ComfortIcon />}
          labelTitle="Label title"
          label="Main information"
          data="Data"
          dataInfo="Data info"
          checked={false}
          disabled={false}
          status={ItemRadioStatus.DEFAULT}
        />
      </ItemRadioGroup>
    </FocusVisibleProvider>
  </Story>
</Canvas>

<Canvas>
  <Story name="Without secondary label">
    <FocusVisibleProvider>
      <ItemRadioGroup onChange={action('group changed')}>
        <ItemRadio
          name2="inputName"
          value="InputValue"
          leftAddon={<LadyIcon />}
          labelTitle="Label title"
          data="Data"
          dataInfo="Data info"
          checked={false}
          disabled={false}
          status={ItemRadioStatus.DEFAULT}
        />
        <ItemRadio
          name2="InputName2"
          value="InputValue2"
          leftAddon={<ComfortIcon />}
          labelTitle="Label title"
          data="Data"
          dataInfo="Data info"
          checked={false}
          disabled={false}
          status={ItemRadioStatus.DEFAULT}
        />
      </ItemRadioGroup>
    </FocusVisibleProvider>
  </Story>
</Canvas>

<Canvas>
  <Story name="Color choice">
    <ItemRadioGroup onChange={action('group changed')} withChevrons>
      <ItemRadio
        name2="color"
        value="black"
        leftAddon={<ColorIcon iconColor="#000000" />}
        labelTitle="Black"
      />
      <ItemRadio
        name2="color"
        value="white"
        leftAddon={<ColorIcon iconColor="#FFFFFF" borderColor="#000000" />}
        labelTitle="White"
      />
      <ItemRadio
        name2="color"
        value="darkblue"
        leftAddon={<ColorIcon iconColor="#0B2742" />}
        labelTitle="Dark blue"
      />
      <ItemRadio
        name2="color"
        value="orange"
        leftAddon={<ColorIcon iconColor="#FA6600" />}
        labelTitle="Orange"
      />
    </ItemRadioGroup>
  </Story>
</Canvas>

## Specifications

We use these items when the user wants to modify a previously selected value. You can't select several choices.

They appear in subflows.

They can't be used as a pre-selected option in a one-screen one-action flow.

There is no limitation on the number of lines for the main info or title. The text, icons and checkboxes are centered in height.

## Usage

```jsx
import { ItemRadio } from '@blablacar/ui-library/build/itemRadio'

<ItemRadio
  name="InputName"
  value="InputValue"
  leftAddon={<LadyIcon />}
  labelTitle="Label title"
  label="Main information"
  data="Data"
  dataInfo="Data info"
  onChange={() => {}}
  checked={false}
  disabled={false}
  status={ItemRadioStatus.DEFAULT}
/>
```

<ArgsTable of={ItemRadio} />