import { $root } from 'startupjs'
import { useState } from 'react'
import Collapse from '../Collapse'
import Div from '../Div'
import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
import { Sandbox } from '@startupjs/docs'

# Collapse

Inherits [react-native-collapsible](https://github.com/oblador/react-native-collapsible).

Collapse allows to toggle the visibility of content.

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

## Simple example

```jsx example noscroll
const [open, setOpen] = useState(false)
return (
  <Collapse title='Simple collapse' open={open} onChange={() => setOpen(!open)}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </Collapse>
)
```

## Pure collapse

Pure collapse does not contain any styles (background, paddings, etc.). It is useful when `Collapse` is used as a children of other components like `Card`. To make it pure, pass the string `pure` to the `variant` property.

```jsx example noscroll
const [open, setOpen] = useState(false)
return (
  <Collapse
    variant='pure'
    open={open}
    onChange={() => setOpen(!open)}
    title='Pure collapse'
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </Collapse>
)
```

## Advanced usage

Collapse consists of two parts - `Header` and `Content`. These parts can be used to add custom markup, the `Header` is used instead of title and the `Content` is used instad of children. They can be used separately. Each part take value of `variant` prop from parent `Collapse` which can be overridden by passing `variant` to itself.

```jsx example noscroll
const [open, setOpen] = useState(false)
return (
  <Collapse open={open} onChange={() => setOpen(!open)}>
    <Collapse.Header iconPosition='right'>Advanced collapse</Collapse.Header>
    <Collapse.Content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </Collapse.Content>
  </Collapse>
)
```

## Icon configuration

You can provide a custom icon by specifying the `icon` option. It must be an arrow-like icon pointing right.

```jsx example
const [open, setOpen] = useState(false)
return (
  <Collapse open={open} onChange={() => setOpen(!open)}>
    <Collapse.Header icon={faAngleRight}>
      Collapse with custom icon
    </Collapse.Header>
    <Collapse.Content>
      Collapse content
    </Collapse.Content>
  </Collapse>
)
```

### No Icon

You can remove an icon completely by specifying `icon={false}`

## Accordion

Using the `Collapse` component, you can create behavior like an accordion.

```jsx example noscroll
const [expand, setExpand] = useState()
const handleChange = (panel) => (shouldExpand) => {
  setExpand(shouldExpand ? panel : null)
}
const collapseStyle = {
  borderTopWidth: 1,
  borderStyle: 'solid',
  borderColor: '#ddd'
}
return (
  <Div>
    <Collapse
      open={expand === 'open1'}
      title='Accordion Header - 1'
      onChange={handleChange('open1')}
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
    </Collapse>
    <Collapse
      style={collapseStyle}
      open={expand === 'open2'}
      title='Accordion Header - 2'
      onChange={handleChange('open2')}
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
    </Collapse>
    <Collapse
      style={collapseStyle}
      open={expand === 'open3'}
      title='Accordion Header - 3'
      onChange={handleChange('open3')}
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
    </Collapse>
  </Div>
)
```

## Sandbox

### Collapse

<Sandbox
  Component={Collapse}
  props={{ $open: $root.scope('_session.Props.Collapse.open') }}
  $props={$root.scope('_session.Props.Collapse')}
  {...{ _comment: "HACK to make alive sandbox when user click on 'open' checkbox" }}
/>

### Collapse.Header

<Sandbox Component={Collapse.Header} />

### Collapse.Content

<Sandbox Component={Collapse.Content} />