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/one_gang/one_gang_Interface.dart';
import 'package:syncrow_app/features/devices/view/widgets/three_gang/three_gang_interface.dart';
import 'package:syncrow_app/features/devices/view/widgets/two_gang/two_gang_Interface.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/utils/context_extension.dart';

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

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        childAspectRatio: 1.5,
      ),
      padding: const EdgeInsets.only(top: 10),
      shrinkWrap: true,
      itemCount: groupsList.length,
      itemBuilder: (_, index) {
        return GestureDetector(
          onTap: () {
            if (groupsList[index].name == 'AC') {
              Navigator.push(
                  context,
                  PageRouteBuilder(
                      pageBuilder: (context, animation1, animation2) => const ACsView()));
            }
            if (groupsList[index].name == '3G') {
              Navigator.push(
                  context,
                  PageRouteBuilder(
                      pageBuilder: (context, animation1, animation2) =>
                          const ThreeGangInterface()));
            }
            if (groupsList[index].name == '2G') {
              Navigator.push(
                  context,
                  PageRouteBuilder(
                      pageBuilder: (context, animation1, animation2) => const TwoGangInterface()));
            }
            if (groupsList[index].name == '1G') {
              Navigator.push(
                  context,
                  PageRouteBuilder(
                      pageBuilder: (context, animation1, animation2) => const OneGangInterface()));
            }
          },
          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(
                      groupsList[index].icon!,
                      fit: BoxFit.contain,
                    ),
                    // CustomSwitch(
                  ],
                ),
                FittedBox(
                  fit: BoxFit.scaleDown,
                  child: BodyLarge(
                    text: groupsList[index].name!,
                    style: context.bodyLarge.copyWith(
                      fontWeight: FontWeight.bold,
                      height: 0,
                      fontSize: 20,
                      color: Colors.grey,
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}