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

import { BASIC } from '../_utils/taxonomy'
import { Paragraph } from '../paragraph'
import { PhoneField } from './index'

<Meta title={`${BASIC}/Text Inputs/PhoneField`} />

# **PhoneField**

<Canvas>
  <Story name="Default">
    <Paragraph id="phoneFieldLabel">Accessibility label</Paragraph>
    <PhoneField
      id="phoneFieldDefault"
      name="phoneFieldDefault"
      aria-labelledby="phoneFieldLabel"
      onChange={() => {}}
    />
  </Story>
</Canvas>

### Custom

<Canvas>
  <Story name="Custom">
    <React.Fragment>
      <p id="labelIdCustom">Accessibility label</p>
      <PhoneField
        id="phoneFieldIdCustom"
        name="phoneFieldCustom"
        className="additionalClass"
        aria-labelledby="labelIdCustom"
        selectFieldLabel="Phone country code"
        textFieldTitle="Phone number"
        textFieldPlaceholder="Phone number"
        defaultRegionValue="FR"
        defaultPhoneValue="0778674534"
        countriesWhiteList={['FR', 'ES']}
        customCountriesName={{
          FR: 'fr label',
          ES: 'es label',
        }}
        isInline={false}
      />
    </React.Fragment>
  </Story>
</Canvas>

### Error

<Canvas>
  <Story name="Error">
    <Paragraph id="phoneFieldLabel">Accessibility label</Paragraph>
    <PhoneField
      id="phoneFieldDefault"
      name="phoneFieldDefault"
      aria-labelledby="phoneFieldLabel"
      onChange={() => {}}
      error="Error example"
    />
  </Story>
</Canvas>


## Specifications

This field consists of the input select field and regular input field.

> Phone input

Phone input part should only accept digits and trigger numeric keyboards on mobile devices.

> Country phone code

The country code should be displayed next to a country flag when selection is made.
On the country list the full name plus code should be visible.

## Behaviour

On small devices the country selector and the phone input field should get separated into two separate fields.

On large devices the inputs should be displayed as merged. Still the full name should be visible.

Maximum width of the name should be in proportion of 1:2 to the number.
If the name is longer than available field it should get truncated.

## Usage

```jsx
import { PhoneField } from '@blablacar/ui-library/build/phoneField'

  <Paragraph id="labelId">Label</Paragraph>
  <PhoneField
    id="PhoneFieldId"
    name="PhoneFieldId"
    className="additionalClass"
    aria-labelledby="labelId"
    selectFieldLabel="Phone country code"
    textFieldTitle="Phone number"
    textFieldPlaceholder="Phone number"
    defaultRegionValue="FR"
    defaultPhoneValue="0778674534"
    countriesWhiteList={['FR', 'ES']}
    customCountriesName={{
      FR: 'fr label',
      ES: 'es label',
    }}
    isInline={false}
    onChange={() => {}}
    error='Error example'
  />
```

<ArgsTable of={PhoneField} />