import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() {
  runApp(MyApp());
}

final shellKey = GlobalKey<NavigatorState>();

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);

  final _router = GoRouter(
    initialLocation: '/',
    debugLogDiagnostics: true,
    routes: [
      ShellRoute(
        navigatorKey: shellKey,
        builder: (context, state, child) => ShellScaffold(child: child),
        pageBuilder: (context, state, child) =>
            MaterialPage(child: ShellScaffold(child: child)),
        routes: [
          GoRoute(
            name: 'Home',
            path: '/',
            builder: (context, state) => const Home(),
            routes: [
              GoRoute(
                name: 'Page A',
                path: 'a',
                builder: (context, state) => const PageA(),
                routes: [
                  GoRoute(
                    name: 'Page B',
                    path: 'b',
                    builder: (context, state) => const PageB(),
                    routes: [
                      GoRoute(
                        name: 'Page C',
                        path: ':id',
                        builder: (context, state) => PageCWithParam(
                          id: state.params['id']!,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ],
      )
    ],
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Shell Route State Test',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      routerConfig: _router,
    );
  }
}


class ShellScaffold extends StatelessWidget {
  const ShellScaffold({Key? key, required this.child}) : super(key: key);
  final Widget child;

  @override
  Widget build(BuildContext context) {
    final state = GoRouterState.of(context);
    print('ShellScaffold build');
    print('GoRouter location: ${GoRouter.of(context).location}');
    print('GoRouterState location: ${state.location}');
    print('GoRouterState subloc: ${state.subloc}');
    print('GoRouterState fullpath: ${state.fullpath}');
    print('GoRouterState params: ${state.params}');
    return Scaffold(
      appBar: AppBar(
        title: Text(state.location),
        // automaticallyImplyLeading: true,
        /// automaticallyImplyLeading does not seem work inside of a ShellRoute.
        /// Manually defining leading below is then required to show a back button.
        /// This is why having a correct GoRouterState is needed.
        leading: (state.location.startsWith('/a'))
            ? BackButton(
                onPressed: () => context.pop(),
              )
            : null,
        actions: [
          /// Used to reset the state of the current path and return to home.
          IconButton(
              onPressed: () => context.go('/'), icon: const Icon(Icons.home))
        ],
      ),
      body: child,
    );
  }
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            const Text('Home'),
            TextButton(
              onPressed: () => context.go('/a'),
              child: const Text('Go /a'),
            ),
            TextButton(
              onPressed: () => context.push('/a'),
              child: const Text('Push /a'),
            ),
          ],
        ),
      ),
    );
  }
}

class PageA extends StatelessWidget {
  const PageA({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            const Text('Page A'),
            TextButton(
              onPressed: () => context.go('/a/b'),
              child: const Text('Go /a/b'),
            ),
            TextButton(
              onPressed: () => context.push('/a/b'),
              child: const Text('Push /a/b'),
            ),
            TextButton(
              onPressed: () => context.pop(),
              child: const Text('pop'),
            ),
          ],
        ),
      ),
    );
  }
}

class PageB extends StatelessWidget {
  const PageB({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          const Text('Page B'),
          TextButton(
            onPressed: () => context.go('/a/b/1'),
            child: const Text('Go /a/b/1'),
          ),
          TextButton(
            onPressed: () => context.push('/a/b/2'),
            child: const Text('Push /a/b/2'),
          ),
          TextButton(
            onPressed: () => context.pop(),
            child: const Text('pop'),
          ),
        ],
      ),
    );
  }
}

class PageCWithParam extends StatelessWidget {
  const PageCWithParam({Key? key, required this.id}) : super(key: key);
  final String id;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Text('Page C with param: $id'),
          TextButton(
            onPressed: () => context.pop(),
            child: const Text('pop'),
          ),
        ],
      ),
    );
  }
}