import 'package:fluent_ui/fluent_ui.dart';
import 'package:fluentui_system_icons/fluentui_system_icons.dart'
    as fluentui_system_icons;
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:momo/provider/token.dart';

class HomePage extends ConsumerStatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  ConsumerState<HomePage> createState() => _HomePageState();
}

class _HomePageState extends ConsumerState<HomePage> {
  int _selected = 0;

  @override
  Widget build(
    BuildContext context,
  ) {
    // String token = ref.watch(tokenProvider);

    return MediaQuery.of(context).size.width > 640
        ? NavigationView(
            appBar: NavigationAppBar(title: Text('momo')),
            pane: NavigationPane(
                displayMode: PaneDisplayMode.auto,
                selected: _selected,
                leading: const Icon(
                    fluentui_system_icons.FluentIcons.backpack_12_filled),
                header: const Text("111"),
                onChanged: (idx) {
                  setState(() {
                    _selected = idx;
                  });
                },
                autoSuggestBox: const AutoSuggestBox(
                  placeholder: "查找",
                  trailingIcon: Center(
                    child: Icon(
                        fluentui_system_icons.FluentIcons.search_12_filled),
                  ),
                  items: [],
                ),
                items: [
                  PaneItem(
                      icon: const Icon(fluentui_system_icons
                          .FluentIcons.network_adapter_16_regular),
                      title: const Text('代理'),
                      // body: DeferredWidget
                      body: ScaffoldPage(
                        header: PageHeader(
                          title: Text("213"),
                        ),
                        content: Center(
                          child: FilledButton(
                            onPressed: () {
                              // ref.watch(tokenProvider.notifier).removeToken();
                              GoRouter.of(context).go("/login");
                            },
                            child: Text("退出"),
                          ),
                        ),
                      )),
                  PaneItem(
                      icon: const Icon(fluentui_system_icons
                          .FluentIcons.settings_48_regular),
                      title: const Text('用户'),
                      body: ScaffoldPage(
                          header: const PageHeader(
                            title: Text("用户"),
                          ),
                          // bottomBar: BottomNavigationBarItem(),
                          // header: HeadingElement.h1(),
                          content: ListView.separated(
                              itemCount: 2,
                              itemBuilder: (context, index) {
                                return const Card(
                                    margin: EdgeInsets.fromLTRB(12, 0, 12, 0),
                                    padding: EdgeInsets.zero,
                                    child: ListTile(
                                        // tileColor:
                                        //     ButtonState.all(const Color(0xffeeeeee)),
                                        leading: Icon(fluentui_system_icons
                                            .FluentIcons
                                            .serial_port_24_regular),
                                        title: Text("端口"),
                                        trailing: SizedBox(
                                          width: 100,
                                          child: TextBox(
                                            placeholder: "端口",
                                          ),
                                        )));
                              },
                              separatorBuilder: (context, index) =>
                                  const SizedBox(
                                    height: 2,
                                  ))))
                ]),
          )
        : Container(
            color: Colors.white,
            child: ScaffoldPage(
              header: PageHeader(
                leading: IconButton(
                  icon: const Icon(fluentui_system_icons
                      .FluentIcons.arrow_hook_up_left_28_filled),
                  onPressed: () {},
                ),
                title: Text("用户"),
              ),
              content: Column(
                children: [
                  Expanded(
                    child: ListView(),
                  ),
                  BottomNavigation(
                    index: _selected,
                    onChanged: (idx) {
                      setState(() {
                        _selected = idx;
                      });
                    },
                    items: const [
                      BottomNavigationItem(
                          title: Text("相册"),
                          icon: Icon(fluentui_system_icons
                              .FluentIcons.fingerprint_48_regular)),
                      BottomNavigationItem(
                          title: Text("用户"),
                          icon: Icon(fluentui_system_icons
                              .FluentIcons.person_48_regular))
                    ],
                  )
                ],
              ),
            ),
          );
    // Column(
    //         children: [
    //           Expanded(
    //               child: ScaffoldPage(
    //             header: PageHeader(
    //               title: Text("用户"),
    //             ),
    //             content: Container(
    //               color: Colors.white,
    //             ),
    //           )),
    //           BottomNavigation(
    //             index: _selected,
    //             onChanged: (idx) {
    //               setState(() {
    //                 _selected = idx;
    //               });
    //             },
    //             items: const [
    //               BottomNavigationItem(
    //                   title: Text("相册"),
    //                   icon: Icon(fluentui_system_icons
    //                       .FluentIcons.fingerprint_48_regular)),
    //               BottomNavigationItem(
    //                   title: Text("用户"),
    //                   icon: Icon(
    //                       fluentui_system_icons.FluentIcons.person_48_regular))
    //             ],
    //           )
    //         ],
    //       );
  }
}