content: import 'package:jaspr/jaspr.dart';
  
  import '../../adapters/html.dart' hide Element;
  import '../../adapters/mdc.dart';
  import '../utils/node_reader.dart';
  import 'button.dart';
  
  class MenuItem extends StatelessComponent {
    const MenuItem({required this.label, super.key});
  
    final String label;
  
    @override
    Component build(BuildContext context) {
      return li(
        classes: 'mdc-list-item channel-menu-list',
        attributes: {'role': 'menuitem'},
        [
          img(classes: 'mdc-list-item__graphic', src: './pictures/logo_dart.png'),
          span(classes: 'mdc-list-item__text', [text(label)]),
        ],
      );
    }
  }
  
  class Menu extends StatelessComponent {
    const Menu({required this.items, required this.onItemSelected, super.key});
  
    final List<MenuItem> items;
    final void Function(int) onItemSelected;
  
    @override
    Component build(BuildContext context) {
      return text('');
    }
  
    @override
    Element createElement() => MenuElement(this);
  }
  
  class MenuElement extends StatelessElement {
    MenuElement(Menu super.component);
  
    @override
    Menu get component => super.component as Menu;
  
    MDCMenuOrStubbed? _menu;
    ElementOrStubbed? _menuNode, _buttonNode;
  
    void setMenuNodes(ElementOrStubbed? menu, ElementOrStubbed? button) {
      _menuNode ??= menu;
      _buttonNode ??= button;
      if (kIsWeb && _menuNode != null && _buttonNode != null) {
        _menu = MDCMenu(_menuNode!)
          ..setAnchorCorner(AnchorCorner.bottomLeft)
          ..setAnchorElement(_buttonNode!);
  
        _menu!.listen('MDCMenu:selected', (e) {
          final index = (e as CustomEventOrStubbed).detail['index'] as int;
          component.onItemSelected(index);
        });
      }
    }
  
    @override
    Component build() {
      return div(styles: Styles(position: Position.relative()), [
        DomNodeReader(
          onNode: (node) {
            setMenuNodes(null, node);
          },
          child: Button(
            id: 'samples-dropdown-button',
            label: 'Samples',
            icon: 'expand_more',
            hideIcon: true,
            iconAffinity: IconAffinity.right,
            onPressed: () {
              if (_menu != null) {
                _menu!.open = !(_menu!.open ?? false);
              }
            },
          ),
        ),
        DomNodeReader(
          onNode: (node) {
            setMenuNodes(node, null);
          },
          child: div(id: 'samples-menu', classes: 'mdc-menu mdc-menu-surface', [
            ul(
              classes: 'mdc-list',
              attributes: {'aria-hidden': 'true', 'aria-orientation': 'vertical', 'tabindex': '-1'},
              component.items,
            ),
          ]),
        ),
      ]);
    }
  }
  