import 'package:bottom_navy_bar/bottom_navy_bar.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:proxibuy/core/gen/assets.gen.dart';
import 'package:proxibuy/core/routes/app_router.dart';
import 'package:proxibuy/data/models/screen_model.dart';
import 'package:proxibuy/presentation/ui/screens/home/home_desk_page.dart';
import 'package:proxibuy/presentation/ui/theme/responsive.dart';

class HomePage extends StatefulWidget {
  final Widget child;

  const HomePage({super.key, required this.child});

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

class _HomePageState extends State<HomePage> {
  @override
  initState() {
    super.initState();
  }

  List<ScreenModel> screens = [
    ScreenModel(
        title: 'Home',
        icon: Assets.icon.outline.home,
        route: AppRouter.initial),
    ScreenModel(
        title: 'Categories',
        icon: Assets.icon.outline.search,
        route: AppRouter.categories),
    ScreenModel(
        title: 'Explore',
        icon: Assets.icon.outline.map,
        route: AppRouter.explore),
    ScreenModel(
        title: 'Settings',
        icon: Assets.icon.outline.setting,
        route: AppRouter.setting),
  ];

  int _getSelectedIndex(BuildContext context) {
    final g = GoRouterState.of(context);
    final String location = g.fullPath.toString();
    return screens.indexWhere((element) => element.route == location);
  }

  @override
  Widget build(BuildContext context) {
    return Responsive(context).builder(
      desktop: HomeDeskPage(child: body()),
      mobile: Scaffold(
        body: body(),
        bottomNavigationBar: bottomNavigationBar(context),
      ),
    );
  }

  Padding bottomNavigationBar(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: BottomNavyBar(
        selectedIndex: _getSelectedIndex(context),
        // landscapeLayout: BottomNavigationBarLandscapeLayout.centered,
        // showUnselectedLabels: false,
        onItemSelected: (index) => _onItemTapped(context, screens[index].route),
        backgroundColor: Theme.of(context).colorScheme.surface,
        itemCornerRadius: 12,
        itemPadding: EdgeInsets.symmetric(horizontal: 16),
        borderRadius: BorderRadius.circular(16),
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        showElevation: true,

        items: [
          ...List.generate(
            screens.length,
            (index) => BottomNavyBarItem(
                icon: screens[index].icon.svg(
                    color: _getSelectedIndex(context) == index
                        ? Theme.of(context).primaryColor
                        : Theme.of(context).colorScheme.onSurface),
                activeColor: Theme.of(context).primaryColor,
                inactiveColor: Theme.of(context).colorScheme.onSurface,
                title: Text(screens[index].title)),
          )
        ],
      ),
    );
  }

  Widget body() {
    return widget.child;
  }

  void _onItemTapped(BuildContext context, String route) {
    context.go(route);
  }
}