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

extension ScreenDeviceExtension on BuildContext {
  bool get isTablet {
    BuildContext context = this;

    return MediaQuery.of(context).size.width >= 650;
  }
}

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

class App extends StatelessWidget {
  App({super.key});

  final GoRouter router = GoRouter(
    initialLocation: "/home",
    routes: [
      GoRoute(
        path: "/home",
        name: "home",
        builder: (context, state) => const HomePage(),
        routes: [
          GoRoute(
            path: "edit-profile",
            name: "edit-profile",
            builder: (context, state) => const EditProfilePage(),
          ),
        ],
      ),
    ],
    redirect: (context, state) {
      // Do not go to the edit profile page on Tablet, because the edit profile
      // page is already merged in Home screen
      if (context.isTablet) {
        String? fullPath = state.fullPath;

        if (fullPath?.contains("edit-profile") ?? false) {
          fullPath!.replaceAll("edit-profile", "");
        }

        return fullPath;
      } else {
        return null;
      }
    },
    debugLogDiagnostics: true,
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: router,
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Home")),
      body: context.isTablet
          ? const Center(
              child: Row(
              children: [
                Expanded(child: Text("Home content")),
                VerticalDivider(width: 50, thickness: 1),
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(hintText: "Username"),
                  ),
                ),
              ],
            ))
          : Center(
              child: ElevatedButton(
                onPressed: () => context.goNamed("edit-profile"),
                child: const Text("Edit profile"),
              ),
            ),
    );
  }
}

class EditProfilePage extends StatelessWidget {
  const EditProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Edit profile")),
      body: const Center(
        child: TextField(
          autofocus: true,
          decoration: InputDecoration(hintText: "Username"),
        ),
      ),
    );
  }
}