import { useState } from 'react'
import Row from '../Row'
import Div from '../Div'
import Span from '../typography/Span'
import Content from '../Content'
import { u } from 'startupjs'
import Radio from '../forms/Radio'
import Checkbox from '../forms/Checkbox'
import Br from '../Br'
import Divider from '../Divider'
import { Sandbox } from '@startupjs/docs'
import './index.mdx.styl'

# Row

Inherits [Div props](/docs/components/Div).

Row is used to group elements horizontally. It uses [css flexbox](https://www.w3schools.com/css/css3_flexbox.asp) internally.

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

## Simple example

```jsx example
const itemStyle = {
  width: u(5),
  height: u(5),
  alignItems: 'center',
  justifyContent: 'center'
}
return (
  <Row>
    <Div style={[itemStyle, { backgroundColor: '#FF7900'}]}>
      <Span>1</Span>
    </Div>
    <Div style={[itemStyle, { backgroundColor: '#F5A623'}]}>
      <Span>2</Span>
    </Div>
    <Div style={[itemStyle, { backgroundColor: '#F5BE59'}]}>
      <Span>3</Span>
    </Div>
  </Row>
)
```

## Horizontal align

The `align` prop modifies the horizontal alignment of items inside a `Row`. The default value is `left`.

```jsx example
const itemStyle = {
  width: u(5),
  height: u(5),
  alignItems: 'center',
  justifyContent: 'center'
}
const alignOptions = [
  { value: null, label: 'left (default)' },
  { value: 'center', label: 'center' },
  { value: 'right', label: 'right' },
  { value: 'around', label: 'around' },
  { value: 'between', label: 'between' }
]
const [align, setAlign] = useState(null)
return (
  <Div>
    <Span>Please select a value for `align` prop</Span>
    <Divider />
    <Radio
      value={align}
      onChange={(newState) => setAlign(newState)}
      options={alignOptions}
    />
    <Br />
    <Content
      padding
      width='full'
      style={{ backgroundColor: '#cfe8fc' }}
    >
      <Row align={align}>
        <Div style={[itemStyle, { backgroundColor: '#FF7900'}]}>
          <Span>1</Span>
        </Div>
        <Div style={[itemStyle, { backgroundColor: '#F5A623'}]}>
          <Span>2</Span>
        </Div>
        <Div style={[itemStyle, { backgroundColor: '#F5BE59'}]}>
          <Span>3</Span>
        </Div>
      </Row>
    </Content>
  </Div>
)
```

## Vertical Align

The `vAlign` prop modifies the vertically alignment of items inside a `Row`. The default value is `start`.

```jsx example
const itemStyle = {
  width: u(5),
  alignItems: 'center',
  justifyContent: 'center'
}
const vAlignOptions = [
  { value: 'stretch', label: 'stretch (default)' },
  { value: 'start', label: 'start' },
  { value: 'center', label: 'center' },
  { value: 'end', label: 'end' }
]
const [vAlign, setVAlign] = useState('stretch')
return (
  <Div>
    <Span>Please select a value for `vAlign` prop</Span>
    <Divider />
    <Radio
      value={vAlign}
      onChange={(newState) => setVAlign(newState)}
      options={vAlignOptions}
    />
    <Br />
    <Content
      padding
      width='full'
      style={{ backgroundColor: '#cfe8fc' }}
    >
      <Row style={{ height: u(25) }} vAlign={vAlign}>
        <Div style={[itemStyle, { backgroundColor: '#FF7900'}]}>
          <Span>1</Span>
        </Div>
        <Div style={[itemStyle, { backgroundColor: '#F5A623'}]}>
          <Span>2</Span>
        </Div>
        <Div style={[itemStyle, { backgroundColor: '#F5BE59'}]}>
          <Span>3</Span>
        </Div>
      </Row>
    </Content>
  </Div>
)
```

## Reverse direction

The `reverse` property is used to reverse the horizontal direction (items are output from right to left). The default value is `false`.

```jsx example
const itemStyle = {
  width: u(5),
  height: u(5),
  alignItems: 'center',
  justifyContent: 'center'
}
const [reverse, setReverse] = useState(true)
return (
  <Div>
    <Checkbox
      label='reverse'
      value={reverse}
      onChange={(newState) => setReverse(newState)}
    />
    <Br />
    <Content
      padding
      width='full'
      style={{ backgroundColor: '#cfe8fc' }}
    >
      <Row
        reverse={reverse}
      >
        <Div style={[itemStyle, { backgroundColor: '#FF7900'}]}>
          <Span>1</Span>
        </Div>
        <Div style={[itemStyle, { backgroundColor: '#F5A623'}]}>
          <Span>2</Span>
        </Div>
        <Div style={[itemStyle, { backgroundColor: '#F5BE59'}]}>
          <Span>3</Span>
        </Div>
      </Row>
    </Content>
  </Div>
)
```

## Multiline mode

The `wrap` property sets whether items are forced onto one line or can wrap onto multiple lines. The default value is `false`.

```jsx example
const [width, setWidth] = useState(0)
const itemStyle = {
  width: width,
  height: u(5),
  flexShrink: 1,
  alignItems: 'center',
  justifyContent: 'center'
}
const [wrap, setWrap] = useState(true)
return (
  <Div>
    <Checkbox
      label='wrap'
      value={wrap}
      onChange={(newState) => setWrap(newState)}
    />
    <Br />
    <Content
      padding
      style={{ backgroundColor: '#cfe8fc' }}
    >
      <Row
        wrap={wrap}
        onLayout={(event) => setWidth(event.nativeEvent.layout.width)}
      >
        <Div style={[itemStyle, { backgroundColor: '#FF7900'}]}>
          <Span>1</Span>
        </Div>
        <Div style={[itemStyle, { backgroundColor: '#F5A623'}]}>
          <Span>2</Span>
        </Div>
        <Div style={[itemStyle, { backgroundColor: '#F5BE59'}]}>
          <Span>3</Span>
        </Div>
      </Row>
    </Content>
  </Div>
)
```

## Sandbox

<Sandbox
  Component={Row}
  props={{
    children: [
      <Div key='first' styleName={['div', 'first']}>
        <Span>1</Span>
      </Div>,
      <Div key='second' styleName={['div', 'second']}>
        <Span>2</Span>
      </Div>,
      <Div key='third' styleName={['div', 'third']}>
        <Span>3</Span>
      </Div>
    ],
    style: { maxWidth: u(70), minHeight: u(15),  backgroundColor: '#cfe8fc' },
    onPress: () => alert('"onPress" event on "Row" component'),
    onLongPress: () => alert('"onLongPress" event on "Row" component')
  }}
  block
/>