import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.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/core/utils/empty_space.dart';
import 'package:proxibuy/data/models/screen_model.dart';
import 'package:proxibuy/presentation/providers/them_mode_cubit.dart';
import 'package:proxibuy/presentation/ui/theme/theme.dart';
import 'package:proxibuy/presentation/ui/widgets/navigations/categories_mega_menu.dart';

class HomeDeskPage extends StatefulWidget {
  final Widget child;
  const HomeDeskPage({super.key, required this.child});

  @override
  State<HomeDeskPage> createState() => _HomeDeskPageState();
}

class _HomeDeskPageState extends State<HomeDeskPage> {
  List<ScreenModel> deskScreens = [
    ScreenModel(
        title: 'Home',
        icon: Assets.icon.outline.home,
        route: AppRouter.initial),
    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 deskScreens
        .indexWhere((element) => element.route.startsWith(location));
  }

  void _onItemTapped(BuildContext context, int index) {
    switch (index) {
      case 0:
        context.go(AppRouter.initial);
        break;
      case 1:
        context.go(AppRouter.explore);
        break;
      case 2:
        context.go(AppRouter.setting);
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          navBar(context),
          Expanded(child: widget.child),
        ],
      ),
    );
  }

  Padding navBar(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              SelectableText(
                "Proxibuy",
                style: Theme.of(context).textTheme.displaySmall,
              ),
              32.w,
              Row(
                children: [
                  ...List.generate(
                    deskScreens.length,
                    (index) => Row(
                      children: [
                        Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(12),
                              color: _getSelectedIndex(context) == index
                                  ? themeColor(context)
                                      ?.primaryLightSurface
                                      .withAlpha(90)
                                  : null),
                          child: IconButton(
                              splashRadius: 12,
                              onPressed: () {
                                _onItemTapped(context, index);
                              },
                              icon: Row(
                                crossAxisAlignment: CrossAxisAlignment.end,
                                children: [
                                  deskScreens[index].icon.svg(
                                      color: _getSelectedIndex(context) == index
                                          ? Theme.of(context).primaryColor
                                          : Theme.of(context)
                                              .colorScheme
                                              .onSurface),
                                  12.w,
                                  Text(
                                    deskScreens[index].title,
                                    style: Theme.of(context)
                                        .textTheme
                                        .labelLarge
                                        ?.copyWith(
                                            color: _getSelectedIndex(context) ==
                                                    index
                                                ? Theme.of(context).primaryColor
                                                : Theme.of(context)
                                                    .colorScheme
                                                    .onSurface),
                                  )
                                ],
                              )),
                        ),
                        24.w
                      ],
                    ),
                  ),
                  CategoriesMegaMenu()
                ],
              ),
            ],
          ),
          Flexible(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                8.w,
                Flexible(
                    child: Container(
                  constraints: BoxConstraints(maxWidth: 800),
                  child: TextField(
                      decoration: defaultInputDecoration(context).copyWith(
                    hintText: 'what are you looking for?',
                    suffixIcon: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Assets.icon.outline.search.svg(
                          color: Theme.of(context).colorScheme.onSurface,
                          width: 16,
                          height: 16),
                    ),
                  )),
                )),
                32.w,
                IconButton(
                  icon: Assets.icon.outline.notificationBing
                      .svg(color: Theme.of(context).colorScheme.onSurface),
                  onPressed: () {},
                ),
                12.w,
                IconButton(
                  icon: Icon(Icons.brightness_6),
                  onPressed: () {
                    context.read<ThemModeCubit>().changeTheme();
                  },
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}