import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:styled_widget/styled_widget.dart';

import '../config.dart';
import '../demo.dart';
import './root_pages/home.dart';
import './root_pages/me.dart';
import '../models/class_destination_item.dart';

const destinations = [
  DestinationItem(
    label: '首页',
    icon: Icons.home,
    child: HomePage(),
    title: '拾糖',
  ),
  // DestinationItem(
  //   label: '展示',
  //   icon: Icons.message,
  //   child: AllWidgetsDemo(),
  //   title: '组件演示',
  // ),
  DestinationItem(
    label: '我的',
    icon: Icons.person,
    child: MePage(),
  ),
];

class RootRoute extends HookConsumerWidget {
  const RootRoute({super.key});
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final index = useState(0);
    final controller = usePageController();
    final jumping = useState(false);

    useEffect(() {
      if (!jumping.value) return null;
      WidgetsBinding.instance.addPostFrameCallback((_) async {
        if (controller.hasClients) {
          await controller.animateToPage(
            index.value,
            duration: AppAnimationConfig.duration,
            curve: AppAnimationConfig.pageViewCurve,
          );
          jumping.value = false;
        }
      });
      return null;
    }, [index.value, jumping.value]);

    return LayoutBuilder(
      builder: (context, constraints) {
        final isWide = constraints.maxWidth >= AppConfig.wideWidth;

        return Scaffold(
          appBar: AppBar(
            title: Text(destinations[index.value].title ?? destinations[index.value].label),
          ),
          body: Row(
            children: [
              if (isWide)
                NavigationRail(
                  backgroundColor: Theme.of(context).colorScheme.surface,
                  selectedIndex: index.value,
                  onDestinationSelected: (i) {
                    if (i != index.value) {
                      index.value = i;
                      jumping.value = true;
                    }
                  },
                  labelType: NavigationRailLabelType.all,
                  destinations: destinations.map((d) {
                    return NavigationRailDestination(
                      icon: Icon(d.icon),
                      label: Text(d.label),
                    );
                  }).toList(),
                ),
                // 内容区域
                Expanded(
                  child: PageView(
                    controller: controller,
                    onPageChanged: (i) {
                      if (!jumping.value) {
                        index.value = i;
                      }
                    },
                    children: <Widget>[
                      for (final d in destinations) d.child,
                    ],
                  ),
                ),
            ],
          ),
          bottomNavigationBar: isWide
          ? null
          : NavigationBar(
            selectedIndex: index.value,
            onDestinationSelected: (i) {
              if (i != index.value) {
                index.value = i;
                jumping.value = true;
              }
            },
            destinations: destinations.map((d) {
              return NavigationDestination(
                icon: Icon(d.icon),
                label: d.label,
              );
            }).toList(),
          ),
        );
      },
    );
  }
}