syncrow-app/lib/features/devices/view/widgets/wizard_page.dart

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 ListView(
          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),
                  ),
                ),
              ),
            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,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ],
        );
      },
    );
  }
}