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 (меню)

Наследует [Div props](/docs/components/Div).

Меню отображает список вариантов, а также может быть использовано для навигации.

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

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

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

## Подсвеченный активный элемент

По умолчанию активный пункт меню не подсвечивается. Чтобы подсветить его, используйте свойство `activeBorder`.

```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` в свойство `variant`.

```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'}
      onPress={() => setActive('option-2')}
    >
      Option-2
    </Menu.Item>
    <Menu.Item
      active={active === 'option-3'}
      onPress={() => setActive('option-3')}
    >
      Option-3
    </Menu.Item>
  </Menu>
)
```



## Иконка пункта меню

Для отображения иконки в пункте меню передайте ему свойство `icon`. Положение иконки может быть изменено путем передачи `iconPosition` в компонент `Menu` (`left` по умолчанию) и может быть переопределено в пункте меню.

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

## Изменение цвета активного пункта меню

По умолчанию активный пункт меню имеет `primary` цвет. Используйте свойство `activeColor`, чтобы установить желаемый цвет для активного пункта меню. Это свойство также изменит цвет бордера и иконки (если вы передали свойство `activeBorder` для Menu или `icon` для Menu.Item). `activeColor` принимает цвет как строку, которая будет совместима со свойством цвета в CSS. (напр. `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>
)
```

## Пункт меню в роли ссылки

Иногда вы хотите использовать пункт меню в качестве ссылки, например, в меню навигации. Смотрите ниже, как вы можете это сделать.

```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
`
```

## Сложное взаимодействие (интеграция с другими компонентами)

Пример раскрывающегося меню с вложенным в него подменю.

```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
              activeBorder='none'
              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"')
  }}
/>