import { ArgsTable, Canvas, ColorItem, ColorPalette, Meta, Story } from '@storybook/addon-docs';
import { View } from 'react-native';
import { InputField } from '..';

<Meta title="Components/InputField" component={InputField} />

export const InputFieldTemplate = (args) => (
    <View style={{ backgroundColor: '#FFFFFF', padding: 30 }}>
        <InputField {...args} />
    </View>
);

# Input Field

export const inputArgTypes = {
    label: 'your name',
    placeholder: 'enter your name',
    keyboardType: 'default',
    maxLength: 30,
    nativeID: 'text_field',
    autoFocus: true,
    colorMode: 'light',
    colorConfig: {
        labelColor: '#0D0D0D',
        textColor: '#000000',
    },
};

export const inputWarningArgTypes = {
    label: 'your name',
    placeholder: 'enter your name',
    keyboardType: 'default',
    maxLength: 30,
    nativeID: 'text_field',
    autoFocus: true,
    errorMessage: 'error message comes here',
    hasError: true,
    colorConfig: {
        textColor: '#0D0D0D',
        errorColor: '#EE4D37',
    },
};

export const argTypes = {
    inputRef: { table: { disable: true } },
};

An input field includes a label and a text field users can type text into.

## Usage

```jsx
import * as React from 'react';
import { InputField } from 'neopop-react-native/components';

const InputFieldExample = () => (
    <View>
        <InputField
            autoFocus
            type="text"
            label="your name"
            placeholder="enter your name"
            nativeID="text_field"
        />
    </View>
);

export default InputFieldExample;
```

## Variants

<Canvas>
    <Story name="InputField" args={{ ...inputArgTypes }} argTypes={argTypes}>
        {InputFieldTemplate.bind({})}
    </Story>
</Canvas>

### With Error Message

<Canvas>
    <Story name="InputWarningField" args={{ ...inputWarningArgTypes }} argTypes={argTypes}>
        {InputFieldTemplate.bind({})}
    </Story>
</Canvas>

## Props

<ArgsTable of={InputField} />

**colorConfig**

<div style={{ overflowX: 'auto' }}>

| prop             | description                                              | type     |
| ---------------- | -------------------------------------------------------- | -------- |
| textColor        | color to be used by input element in active state        | `string` |
| labelColor       | color to be used for the label above input field         | `string` |
| caretColor       | color to be used for the caret (cursor)                  | `string` |
| errorColor       | color to be used for the error message                   | `string` |
| placeholderColor | color to be used for the placeholder text in input field | `string` |

</div>

**textStyle**

<div style={{ overflowX: 'auto' }}>

| prop  | description                                | type                     |
| ----- | ------------------------------------------ | ------------------------ |
| label | font style to be used for label text       | `object - FontNameSpace` |
| input | font style to be used for input field text | `object - FontNameSpace` |

</div>

**FontNameSpace**

<div style={{ overflowX: 'auto' }}>

| prop          | description        | type                                       |
| ------------- | ------------------ | ------------------------------------------ |
| `fontType*`   | typography variant | `heading`, `caps`, `body`, `serif-heading` |
| `fontWeight*` | weight of the text | `800`, `700`, `600`, `500`, `400`, `300`   |
| `fontSize*`   | size of the text   | `string`                                   |

</div>