'''
title: Menu
'''

import streamsync as ss

ss.md("## ss.menu")

ss.md('''
#### 🔅 Example
''')

data = [
    {'index': '1', 'title': 'Processing Center', 'icon':'mdi-home'},
    {'type': 'spacer'}, #add spacer
    {
        'index': '2',
        'title': 'Workspace',
        'icon' : 'mdi-plus',
        'subItems': [
            {'index': '2-1', 'title': 'item one'},
            {'index': '2-2', 'title': 'item two'},
            {'index': '2-3', 'title': 'item three'},
            {
                'index': '2-4',
                'title': 'item four',
                'subItems': [
                    {'index': '2-4-1', 'title': 'item one'},
                    {'index': '2-4-2', 'title': 'item two'},
                    {'index': '2-4-3', 'title': 'item three'},
                ],
            },
        ],
    },
    {'index': '3', 'title': 'Info', 'disabled': True, 'icon':'mdi-cancel'},
    {'index': '4', 'title': 'Orders', 'icon':'mdi-wrench'},
]

def menu_select(event):
    print("menu1")
    ss.message(event.data["keyPath"])

    
ss.md("### Horiontal Menu")
ss.menu(data, direction = "horizontal", onselect = menu_select)

ss.space()
ss.md("### Vertical Menu")

ss.menu(data, direction = "vertical", dark = True, onselect = menu_select)


ss.space()
ss.write('''
---
#### 🔎 Code
''')

ss.md('''
```python
import simplestart as ss

data = [
    {'index': '1', 'title': 'Processing Center', 'icon':'mdi-home'},
    {'type': 'spacer'}, #add spacer
    {
        'index': '2',
        'title': 'Workspace',
        'icon' : 'mdi-plus',
        'subItems': [
            {'index': '2-1', 'title': 'item one'},
            {'index': '2-2', 'title': 'item two'},
            {'index': '2-3', 'title': 'item three'},
            {
                'index': '2-4',
                'title': 'item four',
                'subItems': [
                    {'index': '2-4-1', 'title': 'item one'},
                    {'index': '2-4-2', 'title': 'item two'},
                    {'index': '2-4-3', 'title': 'item three'},
                ],
            },
        ],
    },
    {'index': '3', 'title': 'Info', 'disabled': True, 'icon':'mdi-cancel'},
    {'index': '4', 'title': 'Orders', 'icon':'mdi-wrench'},
]

def menu_select(event):
    print("menu1")
    ss.message(event.data["keyPath"])

    
ss.md("### Horiontal Menu")
ss.menu(data, direction = "horizontal", onselect = menu_select)

ss.space()
ss.md("### Vertical Menu")

ss.menu(data, direction = "vertical", dark = True, onselect = menu_select)

```
''')