import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/svg.dart';
import 'package:syncrow_app/features/app_layout/model/space_model.dart';
import 'package:syncrow_app/features/menu/bloc/manage_unit_bloc/manage_unit_bloc.dart';
import 'package:syncrow_app/features/menu/bloc/manage_unit_bloc/manage_unit_event.dart';
import 'package:syncrow_app/features/menu/bloc/manage_unit_bloc/manage_unit_state.dart';
import 'package:syncrow_app/features/shared_widgets/default_scaffold.dart';
import 'package:syncrow_app/generated/assets.dart';
import 'package:syncrow_app/utils/helpers/snack_bar.dart';

class AssignDeviceView extends StatelessWidget {
  final String unitId;
  final String roomId;
  final SpaceModel unit;
  const AssignDeviceView(
      {super.key,
      required this.unitId,
      required this.roomId,
      required this.unit});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
        create: (context) => ManageUnitBloc()
          ..add(FetchDevicesByRoomIdEvent(roomId: roomId, unit: unit)),
        child: BlocConsumer<ManageUnitBloc, ManageUnitState>(
            listener: (context, state) {
          if (state is FetchDeviceByRoomIdState) {
            if (state.allDevices.isEmpty) {
              CustomSnackBar.displaySnackBar(
                  'You do not have the permission to assign devices');
              Navigator.of(context).pop();
            }
          }
        }, builder: (context, state) {
          return DefaultScaffold(
              title: 'Space Setting',
              child: state is LoadingState
                  ? const Center(child: RefreshProgressIndicator())
                  : state is FetchDeviceByRoomIdState
                      ? Container(
                          width: MediaQuery.sizeOf(context).width,
                          height: MediaQuery.sizeOf(context).height,
                          child: GridView.builder(
                              gridDelegate:
                                  const SliverGridDelegateWithFixedCrossAxisCount(
                                crossAxisCount: 2,
                                crossAxisSpacing: 10.0,
                                mainAxisSpacing: 10.0,
                                childAspectRatio: 1.0,
                              ),
                              itemCount: state.allDevices.length,
                              itemBuilder: (context, index) {
                                return Container(
                                  width: MediaQuery.sizeOf(context).width,
                                  padding: const EdgeInsets.all(16),
                                  decoration: ShapeDecoration(
                                    color: Colors.white,
                                    shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(20),
                                    ),
                                  ),
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          SvgPicture.asset(
                                            state.allDevices[index].icon!,
                                            fit: BoxFit.contain,
                                          ),
                                          GestureDetector(
                                              onTap: () {
                                                bool isAssigned =
                                                    state.roomDevicesId[state
                                                            .allDevices[index]
                                                            .uuid!] ??
                                                        false;
                                                if (isAssigned) {
                                                  BlocProvider.of<
                                                              ManageUnitBloc>(
                                                          context)
                                                      .add(UnassignRoomEvent(
                                                          deviceId: state
                                                                  .allDevices[
                                                                      index]
                                                                  .uuid ??
                                                              '',
                                                          unit: unit,
                                                          roomId: roomId));
                                                } else {
                                                  // Tick (assign) the device
                                                  BlocProvider.of<
                                                              ManageUnitBloc>(
                                                          context)
                                                      .add(AssignRoomEvent(
                                                          deviceId: state
                                                                  .allDevices[
                                                                      index]
                                                                  .uuid ??
                                                              '',
                                                          unit: unit,
                                                          roomId: roomId));
                                                }
                                              },
                                              child: SvgPicture.asset(
                                                state.roomDevicesId[state
                                                            .allDevices[index]
                                                            .uuid!] ??
                                                        false
                                                    ? Assets.blueCheckboxIcon
                                                    : Assets.emptyCheckboxIcon,
                                                width: 22,
                                                height: 22,
                                              ))
                                        ],
                                      ),
                                      Text(state.allDevices[index].name ?? ''),
                                    ],
                                  ),
                                );
                              }),
                        )
                      : Container());
        }));
  }
}