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

import { FocusVisibleProvider } from '../_utils/focusVisibleProvider'
import { BASIC } from '../_utils/taxonomy'
import { ItemEditableInfo } from './index'

<Meta title={`${BASIC}/Items with Action/Item Editable Info `} />

# ItemEditableInfo

### Link

<Canvas>
  <Story name="Link">
    <FocusVisibleProvider>
      <ItemEditableInfo
        href="http://google.fr`"
        label="First name"
        value="John"
      />
    </FocusVisibleProvider>
  </Story>
</Canvas>

### button

<Canvas>
  <Story name="Button">
    <FocusVisibleProvider>
      <ItemEditableInfo
        label="First name"
        value="John"
        onClick={() => {
          // eslint-disable-next-line no-alert
          window.alert('Clicked')
        }}
      />
    </FocusVisibleProvider>
  </Story>
</Canvas>

### Read Only

<Canvas>
  <Story name="Read Only">
    <FocusVisibleProvider>
      <ItemEditableInfo label="Gender (readonly)" value="Female" readonly />
    </FocusVisibleProvider>
  </Story>
</Canvas>

## Specifications

### Normal state

We use these items editable info in cases in which we show an editable (or not) dynamic info that was previously given by a member.
In this case we need to know both the label and the value of what was input.

### Behaviour

We could display several items on the same line.
When user activates it, it launches a modal to edit the value if it's editable.
It does nothing if it's in readonly mode.

### Long texts

Label can’t go on more than 1 line. If too long we display “…” at the end.
There’s no limitation on the number of lines for the value though.

## Usage

```jsx
import { ItemEditableInfo } from '@blablacar/ui-library/build/itemEditableInfo'

<ItemEditableInfo
  href="http://google.fr`"
  label="First name"
  value="John"
  onClick={() => {
    // eslint-disable-next-line no-alert
    window.alert('Clicked')
  }}
  readonly={false}
/>
```

<ArgsTable of={ItemEditableInfo} />