import { useMemo, useEffect } from 'react'
import Input from '../Input'
import Div from '../../Div'
import Br from '../../Br'
import Span from '../../typography/Span'
import { $root, useValue, u } from 'startupjs'
import { getPropsForType, getDefaultValueForType } from './docsHelpers'
import { Sandbox } from '@startupjs/docs'

# Input

Input provides a wrapper api around input components by adding two-way data bindings, different customizable layouts that allow you to display inputs with label and description in different ways and provides the ability to display an error.

```jsx
import { Input } from from '@startupjs/ui'
```

**Input components**

Possible types are: [array](/docs/forms/Array), [сheckbox](/docs/forms/Checkbox), [date](/docs/forms/DateTimePicker), [datetime](/docs/forms/DateTimePicker), [multiselect](/docs/forms/Multiselect), [number](/docs/forms/NumberInput), [object](/docs/forms/ObjectInput), [password](/docs/forms/PasswordInput), [radio](/docs/forms/Radio), [range](/docs/forms/RangeInput), [select](/docs/forms/Select), [time](/docs/forms/DateTimePicker), [text](/docs/forms/TextInput).

You can use any of the above components by specifying the `type` property.

**Layouts**

Possible types are:
- `pure` displays input without label and description
- `rows` displays input in one row with provided label and description
- `columns` displays input in two columns with provided label and description

There are several rules that determine which layout to use:
- for tablet screen resolutions and less the `rows` layout is always used
- for screen resolutions larger than a tablet you can use any of the above layouts by specifying the `layout` property of the component, but if the layout is not passed to the component it is determined automatically by logic: `rows` if `label` or `description` property is specified, otherwise `pure`

## Simple example

```jsx example
const [, $value] = useValue()

return (
  <Input
    type='text'
    $value={$value}
  />
)
```

## Layout

```jsx example
const [, $value] = useValue()

return (
  <Input
    type='text'
    label='Password'
    description="Make sure it's at least 15 characters OR at least 8 characters including a number and a lowercase letter"
    layout='columns'
    $value={$value}
  />
)
```

## Displaying errors

To display an error, pass the error text to the `error` property

```jsx example
const [value, $value] = useValue()

return (
  <Input
    $value={$value}
    error={value ? '' : 'Need to fill the field'}
  />
)
```

## Sandbox

export function SandboxWrapper () {
  const $input = $root.scope('_session.Sandbox.Input')
  useEffect(()=> {
    $input.at('type').on('change', type=> {
      $input.set(getPropsForType())
      $input.set('value', getDefaultValueForType())
    })
  }, [])
  return (
    <Sandbox
      Component={Input}
      $props={$input}
      block
    />
  )
}

<SandboxWrapper />