import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/svg.dart';
import 'package:syncrow_app/features/devices/bloc/devices_cubit.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';
import 'package:syncrow_app/utils/helpers/custom_page_route.dart';

class WizartSwitches extends StatelessWidget {
  const WizartSwitches({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<DevicesCubit, DevicesState>(
      builder: (context, state) {
        return state is! DevicesLoading
            ? DevicesCubit.allCategories != null
                ? GridView.builder(
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      crossAxisSpacing: 10,
                      mainAxisSpacing: 10,
                      childAspectRatio: 1.5,
                    ),
                    padding: const EdgeInsets.only(top: 10),
                    physics: const NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    itemCount: DevicesCubit.allCategories!.length,
                    itemBuilder: (_, index) {
                      return InkWell(
                        onTap: () {
                          // DevicesCubit.getInstance().selectCategory(index);
                          //Navigate to the chosen category view without animation
                          if (DevicesCubit.getInstance().chosenCategoryView ==
                              null) {
                            return;
                          }
                          Navigator.push(context,
                              CustomPageRoute(builder: (context) {
                            return DevicesCubit.getInstance()
                                .chosenCategoryView!;
                          }));
                        },
                        child: DefaultContainer(
                          child: Padding(
                            padding: const EdgeInsets.only(
                                top: 10, right: 10, left: 10),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    SvgPicture.asset(
                                      DevicesCubit.allCategories![index].icon!,
                                      fit: BoxFit.contain,
                                    ),
                                    // CustomSwitch(
                                  ],
                                ),
                                Expanded(
                                  child: FittedBox(
                                    fit: BoxFit.scaleDown,
                                    child: BodyLarge(
                                      text: DevicesCubit
                                          .allCategories![index].name!,
                                      style: context.bodyLarge.copyWith(
                                        fontWeight: FontWeight.bold,
                                        height: 0,
                                        fontSize: 24,
                                        color: Colors.grey,
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      );
                    },
                  )
                : const SizedBox.shrink()
            : const Center(
                child: CircularProgressIndicator(),
              );
      },
    );
  }
}