import { useState } from 'react'
import { pug, useLocal } from 'startupjs'
import Menu from '../Menu'
import MenuItem from '../Menu/MenuItem'
import Collapse from '../Collapse'
import { u } from 'startupjs'
import { faShareAlt, faHouseUser, faTable } from '@fortawesome/free-solid-svg-icons'
import { Sandbox } from '@startupjs/docs'

# Menu

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

Menu displays a list of choices and also can be used for navigation.

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

## Simple example

```jsx example
const [active, setActive] = useState('option-1')
return (
  <Menu>
    <Menu.Item
      active={active === 'option-1'}
      onPress={() => setActive('option-1')}
    >
      Option-1
    </Menu.Item>
    <Menu.Item
      active={active === 'option-2'}
      onPress={() => setActive('option-2')}
    >
      Option-2
    </Menu.Item>
  </Menu>
)
```

## Highlighted active item

By default the active menu item is not highlighted. To highlight it use the `activeBorder` property.

```jsx example
const [active, setActive] = useState('option-1')
return (
  <Menu activeBorder='left'>
    <Menu.Item
      active={active === 'option-1'}
      onPress={() => setActive('option-1')}
    >
      Option-1
    </Menu.Item>
    <Menu.Item
      active={active === 'option-2'}
      onPress={() => setActive('option-2')}
    >
      Option-2
    </Menu.Item>
    <Menu.Item
      active={active === 'option-3'}
      onPress={() => setActive('option-3')}
    >
      Option-3
    </Menu.Item>
  </Menu>
)
```

## Horizontal menu

By default the menu shows vertically. To make it horizontal, you need pass the string `horizontal` to the `variant` property.

```jsx example
const [active, setActive] = useState('option-1')
return (
  <Menu variant='horizontal'>
    <Menu.Item
      active={active === 'option-1'}
      onPress={() => setActive('option-1')}
    >
      Option-1
    </Menu.Item>
    <Menu.Item
      active={active === 'option-2'}
      onPress={() => setActive('option-2')}
    >
      Option-2
    </Menu.Item>
    <Menu.Item
      active={active === 'option-3'}
      onPress={() => setActive('option-3')}
    >
      Option-3
    </Menu.Item>
  </Menu>
)
```

## Menu item icon

To display icon in menu item pass the `icon` property to it. Position of icon can be changed by passing `iconPosition` to `Menu` component (`left` by default) and can be override in menu item.

```jsx example
const [active, setActive] = useState('option-1')
return (
  <Menu variant='horizontal'>
    <Menu.Item
      active={active === 'option-1'}
      icon={faShareAlt}
      onPress={() => setActive('option-1')}
    >
      Option-1
    </Menu.Item>
    <Menu.Item
      active={active === 'option-2'}
      icon={faHouseUser}
      onPress={() => setActive('option-2')}
    >
      Option-2
    </Menu.Item>
    <Menu.Item
      active={active === 'option-3'}
      icon={faTable}
      onPress={() => setActive('option-3')}
    >
      Option-3
    </Menu.Item>
  </Menu>
)
```

## Change color of active item

By default, the active menu item has a `primary` color. Use the `activeColor` property to set the desired color for the active element. This property will also change the color of border and icon (if you passed an `activeBorder` property for a Menu or an `icon` for a Menu.Item). `activeColor` accepts color as a string which will be compatible with the CSS color property.(ex. `red`, `#fff`, `rgb(123, 23, 122)`)

```jsx example
const [active, setActive] = useState('option-1')
return (
  <Menu
    activeBorder='bottom'
    variant='horizontal'
    activeColor='rgb(123, 23, 122)'
  >
    <Menu.Item
      active={active === 'option-1'}
      icon={faShareAlt}
      onPress={() => setActive('option-1')}
    >
      Option-1
    </Menu.Item>
    <Menu.Item
      active={active === 'option-2'}
      icon={faHouseUser}
      onPress={() => setActive('option-2')}
    >
      Option-2
    </Menu.Item>
    <Menu.Item
      active={active === 'option-3'}
      icon={faTable}
      onPress={() => setActive('option-3')}
    >
      Option-3
    </Menu.Item>
  </Menu>
)
```

## Menu item as link

Sometimes you want using menu item as link, for example in navigation menu. See below how you can do this.

```jsx example
const [url] = useLocal('$render.url')
const components = [
  { label: 'Menu', to: '/docs/components/Menu' },
  { label: 'Div', to: '/docs/components/Div' },
  { label: 'Button', to: '/docs/components/Button' }
]
return pug`
  Menu(activeBorder='left')
    each component, index in components
      - const to = component.to
      Menu.Item(
        key=index
        active=to === url
        to=to
      )= component.label
`
```

## Complex interaction (integration with other components)

An example of a collapsible menu with submenus nested in.

```jsx example
const [showMenu, setShowMenu] = useState(true)
const [showSubMenu, setShowSubMenu] = useState(false)
const [active, setActive] = useState('option-1')
return (
  <Collapse
    variant='pure'
    open={showMenu}
    onChange={() => setShowMenu(!showMenu)}
  >
    <Collapse.Header>
      <Menu.Item
        style={{ paddingLeft: 0 }}
        active={showMenu}
      >
        Main menu
      </Menu.Item>
    </Collapse.Header>
    <Collapse.Content>
      <Menu activeBorder='left'>
        <Menu.Item
          active={active === 'option-1'}
          onPress={() => setActive('option-1')}
        >
          Option-1
        </Menu.Item>
        <Menu.Item
          active={active === 'option-2'}
          onPress={() => setActive('option-2')}
        >
          Option-2
        </Menu.Item>
        <Collapse
          style={{ marginLeft: u(2) }}
          variant='pure'
          open={showSubMenu}
          onChange={() => setShowSubMenu(!showSubMenu)}
        >
          <Collapse.Header>
            <Menu.Item
              style={{ paddingLeft: 0 }}
              active={showSubMenu}
            >
              Option-3
            </Menu.Item>
          </Collapse.Header>
          <Collapse.Content>
            <Menu activeBorder='left'>
              <Menu.Item
                active={active === 'option-4'}
                onPress={() => setActive('option-4')}
              >
                Option-4
              </Menu.Item>
              <Menu.Item
                active={active === 'option-5'}
                onPress={() => setActive('option-5')}
              >
                Option-5
              </Menu.Item>
            </Menu>
          </Collapse.Content>
        </Collapse>
      </Menu>
    </Collapse.Content>
  </Collapse>
)
```

## Sandbox

### Menu

<Sandbox
  Component={Menu}
  props={{
    children: [
      <MenuItem
        key='option-1'
        icon={faHouseUser}
        active={true}
        onPress={() => alert('"onPress" event on "Option-1"')}
      >
        Option-1
      </MenuItem>,
      <MenuItem
        key='option-2'
        active={false}
        onPress={() => alert('"onPress" event on "Option-2"')}
      >
        Option-2
      </MenuItem>
    ]
  }}
/>

### Menu.Item

<Sandbox
  Component={Menu.Item}
  extraParams={{
    icon: {
      showIconSelect: true
    }
  }}
  props={{
    children: 'Option-1',
    onPress: () => alert('"onPress" event on "Option-1"')
  }}
/>