import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:syncrow_app/features/devices/model/device_category_model.dart';
import 'package:syncrow_app/features/devices/view/widgets/ACs/acs_view.dart';
import 'package:syncrow_app/features/devices/view/widgets/curtains/curtains_wizard.dart';
import 'package:syncrow_app/features/devices/view/widgets/garage_door/garage_wizard.dart';
import 'package:syncrow_app/features/devices/view/widgets/one_gang/one_gang_wizard.dart';
import 'package:syncrow_app/features/devices/view/widgets/one_touch/one_touch_wizard.dart';
import 'package:syncrow_app/features/devices/view/widgets/three_gang/three_gang_wizard.dart';
import 'package:syncrow_app/features/devices/view/widgets/three_touch/three_touch_wizard.dart';
import 'package:syncrow_app/features/devices/view/widgets/two_gang/two_gang_wizard.dart';
import 'package:syncrow_app/features/devices/view/widgets/two_touch/two_touch_wizard.dart';
import 'package:syncrow_app/features/devices/view/widgets/water_heater/wh_wizard.dart';
import 'package:syncrow_app/features/shared_widgets/default_container.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.dart';
import 'package:syncrow_app/generated/assets.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

class WizardPage extends StatelessWidget {
  final List<DevicesCategoryModel> groupsList;
  const WizardPage({super.key, required this.groupsList});

  @override
  Widget build(BuildContext context) {
    final TextEditingController _searchController = TextEditingController();
    List<DevicesCategoryModel> _filteredGroups = groupsList;

    void _filterGroups(String query) {
      _filteredGroups = groupsList
          .where((group) =>
              group.name!.toLowerCase().contains(query.toLowerCase()))
          .toList();
    }

    return StatefulBuilder(
      builder: (context, setState) {
        return Column(
          children: [
            if (groupsList.isNotEmpty)
              TextFormField(
                controller: _searchController,
                onChanged: (value) {
                  setState(() {
                    _filterGroups(value);
                  });
                },
                decoration: InputDecoration(
                  hintText: 'Search',
                  hintStyle: const TextStyle(
                      color: ColorsManager.textGray,
                      fontSize: 16,
                      fontWeight: FontWeight.w400),
                  prefixIcon: Container(
                    padding: const EdgeInsets.all(5.0),
                    margin: const EdgeInsets.all(10.0),
                    child: SvgPicture.asset(
                      Assets.searchIcon,
                      fit: BoxFit.contain,
                    ),
                  ),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                ),
              ),
            const SizedBox(
              height: 10,
            ),
            _filteredGroups.isNotEmpty
                ? Expanded(
                    child: ListView(
                      shrinkWrap: true,
                      children: [
                        GridView.builder(
                          gridDelegate:
                              const SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 2,
                            crossAxisSpacing: 10,
                            mainAxisSpacing: 10,
                            childAspectRatio: 1.5,
                          ),
                          padding: const EdgeInsets.only(top: 10),
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          itemCount: _filteredGroups.length,
                          itemBuilder: (_, index) {
                            return GestureDetector(
                              onTap: () {
                                if (_filteredGroups[index].name == 'AC') {
                                  Navigator.push(
                                      context,
                                      PageRouteBuilder(
                                          pageBuilder: (context, animation1,
                                                  animation2) =>
                                              const ACsView()));
                                }
                                if (_filteredGroups[index].name == '3G') {
                                  Navigator.push(
                                      context,
                                      PageRouteBuilder(
                                          pageBuilder: (context, animation1,
                                                  animation2) =>
                                              const ThreeGangWizard()));
                                }
                                if (_filteredGroups[index].name == '2G') {
                                  Navigator.push(
                                      context,
                                      PageRouteBuilder(
                                          pageBuilder: (context, animation1,
                                                  animation2) =>
                                              const TwoGangWizard()));
                                }
                                if (_filteredGroups[index].name == '1G') {
                                  Navigator.push(
                                      context,
                                      PageRouteBuilder(
                                          pageBuilder: (context, animation1,
                                                  animation2) =>
                                              const OneGangWizard()));
                                }
                                if (_filteredGroups[index].name == 'WH') {
                                  Navigator.push(
                                      context,
                                      PageRouteBuilder(
                                          pageBuilder: (context, animation1,
                                                  animation2) =>
                                              const WHWizard()));
                                }

                                if (_filteredGroups[index].name == '1GT') {
                                  Navigator.push(
                                      context,
                                      PageRouteBuilder(
                                          pageBuilder: (context, animation1,
                                                  animation2) =>
                                              const OneTouchWizard()));
                                }

                                if (_filteredGroups[index].name == '2GT') {
                                  Navigator.push(
                                      context,
                                      PageRouteBuilder(
                                          pageBuilder: (context, animation1,
                                                  animation2) =>
                                              const TwoTouchWizard()));
                                }

                                if (_filteredGroups[index].name == '3GT') {
                                  Navigator.push(
                                      context,
                                      PageRouteBuilder(
                                          pageBuilder: (context, animation1,
                                                  animation2) =>
                                              const ThreeTouchWizard()));
                                }

                                if (_filteredGroups[index].name == 'GD') {
                                  Navigator.push(
                                      context,
                                      PageRouteBuilder(
                                          pageBuilder: (context, animation1,
                                                  animation2) =>
                                              const GarageWizard()));
                                }
                                if (_filteredGroups[index].name == 'CUR') {
                                  Navigator.push(
                                      context,
                                      PageRouteBuilder(
                                          pageBuilder: (context, animation1,
                                                  animation2) =>
                                              const CurtainsWizard()));
                                }
                              },
                              child: DefaultContainer(
                                padding: const EdgeInsets.all(15),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Row(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        SvgPicture.asset(
                                          _filteredGroups[index].icon!,
                                          fit: BoxFit.contain,
                                        ),
                                      ],
                                    ),
                                    FittedBox(
                                      fit: BoxFit.scaleDown,
                                      child: BodyLarge(
                                        text: _filteredGroups[index].name!,
                                        style: context.bodyLarge.copyWith(
                                          fontWeight: FontWeight.bold,
                                          height: 0,
                                          fontSize: 20,
                                          color: Colors.grey,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            );
                          },
                        )
                      ],
                    ),
                  )
                : const Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Center(
                            child: Text(
                          'No Results Found',
                          style: TextStyle(
                              color: ColorsManager.grayColor,
                              fontSize: 14,
                              fontWeight: FontWeight.w400),
                        )),
                      ],
                    ),
                  ),
          ],
        );
      },
    );
  }
}