import 'package:fluent_ui/fluent_ui.dart';
import 'package:info_tren/pages/main/main_page.dart';

class MainPageFluent extends MainPageShared {
  const MainPageFluent({super.key});

  @override
  Widget build(BuildContext context) {
    return NavigationView(
      appBar: NavigationAppBar(
        automaticallyImplyLeading: false,
        title: Text(pageTitle),
        actions: Row(
          mainAxisSize: MainAxisSize.min,
          children: popupMenu.map((i) => Center(
            child: SizedBox(
              width: 32,
              height: 32,
              child: IconButton(
                icon: Icon({
                  'Setări': FluentIcons.settings,
                  'Despre aplicație': FluentIcons.info,
                }[i.name]),
                onPressed: i.action != null ? () => i.action!(context) : null,
              ),
            ),
          )).toList(),
        ),
        // centerTitle: true,
        // actions: [
        //   PopupMenuButton<int>(
        //     icon: const Icon(Icons.more_vert),
        //     tooltip: moreOptionsText,
        //     itemBuilder: (_) => popupMenu.asMap().entries.map((e) => PopupMenuItem(
        //       value: e.key,
        //       child: Text(e.value.name),
        //     )).toList(),
        //     onSelected: (index) {
        //       popupMenu[index].action?.call(context);
        //     },
        //   ),
        // ],
      ),
      content: SafeArea(
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: options.map((option) => HoverButton(
              onPressed: option.action != null ? () => option.action!(context) : null,
              builder: (context, states) {
                return Card(
                  backgroundColor: option.action != null ? (states.isHovering ? FluentTheme.of(context).accentColor.dark : FluentTheme.of(context).accentColor) : null,
                  child: Column(
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          option.name,
                          style: FluentTheme.of(context)
                            .typography
                            .bodyLarge
                            ?.copyWith(
                              color:
                                  FluentTheme.of(context).activeColor,
                            ),
                          textAlign: TextAlign.center,
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(option.description!),
                      ),
                    ],
                  ),
                );
              },
            )).map((w) => Padding(
              padding: const EdgeInsets.fromLTRB(4, 2, 4, 2),
              child: SizedBox(
                width: double.infinity,
                child: w,
              ),
            )).toList(),
          ),
        ),
      ),
    );
  }
}