import 'package:bottom_navy_bar/bottom_navy_bar.dart';
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/cubit/them_mode_cubit.dart';
import 'package:proxibuy/presentation/ui/screens/home/explore_screen.dart';
import 'package:proxibuy/presentation/ui/screens/home/home_screen.dart';
import 'package:proxibuy/presentation/ui/screens/home/setting_screen.dart';
import 'package:proxibuy/presentation/ui/theme/responsive.dart';
import 'package:proxibuy/presentation/ui/theme/theme.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> {
  int selectedIndex = 0;
  List<ScreenModel> screens = [
    ScreenModel(title: 'Home', icon: Assets.icon.outline.home),
    ScreenModel(title: 'Explore', icon: Assets.icon.outline.map),
    ScreenModel(title: 'Settings', icon: Assets.icon.outline.setting),
  ];

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

  Padding navBar(BuildContext context) {
    final defaultBorder = OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
        borderSide:
            BorderSide(color: Theme.of(context).colorScheme.surface, width: 2));
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Flexible(
            child: Row(
              children: [
                SelectableText(
                  "Proxibuy",
                  style: Theme.of(context).textTheme.displaySmall,
                ),
                32.w,
                Row(
                  children: [
                    ...List.generate(
                      screens.length,
                      (index) => Row(
                        children: [
                          Container(
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(12),
                                color: selectedIndex == index
                                    ? themeColor(context)
                                        ?.primaryLightSurface
                                        .withAlpha(90)
                                    : null),
                            child: IconButton(
                                splashRadius: 12,
                                onPressed: () {
                                  _onItemTapped(context, index);
                                },
                                icon: Row(
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  children: [
                                    screens[index].icon.svg(
                                        color: selectedIndex == index
                                            ? Theme.of(context).primaryColor
                                            : Theme.of(context)
                                                .colorScheme
                                                .onSurface),
                                    12.w,
                                    Text(
                                      screens[index].title,
                                      style: Theme.of(context)
                                          .textTheme
                                          .labelLarge
                                          ?.copyWith(
                                              color: selectedIndex == index
                                                  ? Theme.of(context)
                                                      .primaryColor
                                                  : Theme.of(context)
                                                      .colorScheme
                                                      .onSurface),
                                    )
                                  ],
                                )),
                          ),
                          24.w
                        ],
                      ),
                    )
                  ],
                ),
                8.w,
                Flexible(
                    child: Container(
                  constraints: BoxConstraints(maxWidth: 800),
                  child: TextField(
                    decoration: InputDecoration(
                        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),
                        ),
                        enabledBorder: defaultBorder,
                        border: defaultBorder),
                  ),
                )),
                32.w,
              ],
            ),
          ),
          Row(
            children: [
              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();
                },
              ),
            ],
          )
        ],
      ),
    );
  }

  Padding bottomNavigationBar(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: BottomNavyBar(
        selectedIndex: selectedIndex,
        // landscapeLayout: BottomNavigationBarLandscapeLayout.centered,
        // showUnselectedLabels: false,
        onItemSelected: (index) => _onItemTapped(context, index),
        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: selectedIndex == 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, int index) {
    setState(() {
      selectedIndex = index;
    });
    switch (index) {
      case 0:
        context.go(AppRouter.initial);
        break;
      case 1:
        context.go(AppRouter.explore);
        break;
      case 2:
        context.go(AppRouter.setting);
        break;
    }
  }
}