import { useEffect, useMemo } 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 (инпут)

Инпут предоставляет апи-обвертку над инпут компонентами, добавляя двухстороннюю привязку данных, различные настраиваемые компоновки которые позволяют по-разному отображать инпуты с подписью и описанием, а также предоставляет возможность отображать ошибку.

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

**Инпуты**

Возможные типы: [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).

Вы можете использовать любой из вышеперечисленных компонентов, указав свойство type.

**Компоновки**

Возможные типы:
- `pure` отображает инпут без подписи и описания
- `rows` отображает инпут в одной строке с предоставленной подписью и описанием
- `columns` отображает инпут в двух столбцах с предоставленной подписью и описанием

There are several rules that determine which layout to use:
- для разрешений экрана планшета и ниже всегда используется компоновка `rows`
- для разрешений экрана больше планшета вы можете использовать любую из вышеперечисленных компоновок указав свойство `layout` компонента, но если компоновка не передается компоненту, то она автоматически определяется по логике: `rows` если указано свойство `label` или `description`, в противном случае `pure`

## Простой пример

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

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

## Компоновка

```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}
  />
)
```

## Отображение ошибок

Для отображения ошибки, передайте текст ошибки в свойство `error`

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

return (
  <Input
    $value={$value}
    error={value ? '' : 'Нужно заполнить поле'}
  />
)
```

## 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 />