import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/svg.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;
  const AssignDeviceView({super.key, required this.unitId, required this.roomId});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
        create: (context) => ManageUnitBloc()..add(FetchDevicesByRoomIdEvent(roomId: roomId)),
        child: BlocConsumer<ManageUnitBloc, ManageUnitState>(listener: (context, state) {
          if (state is FetchDeviceByRoomIdState) {
            if (state.allDevices.isEmpty) {
              CustomSnackBar.displaySnackBar('No devices available for this user');
              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: () {
                                                if (state.roomDevicesId[
                                                        state.allDevices[index].uuid!] ??
                                                    false == false) {
                                                  BlocProvider.of<ManageUnitBloc>(context).add(
                                                      AssignRoomEvent(
                                                          deviceId:
                                                              state.allDevices[index].uuid ?? '',
                                                          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());
        }));
  }
}