syncrow-app/lib/features/devices/view/device_settings/create_group.dart

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/four_scene_bloc/four_scene_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/four_scene_bloc/four_scene_event.dart';
import 'package:syncrow_app/features/devices/bloc/four_scene_bloc/four_scene_state.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/shared_widgets/default_container.dart';
import 'package:syncrow_app/features/shared_widgets/default_scaffold.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_small.dart';
import 'package:syncrow_app/generated/assets.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

class FourSceneCreateGroup extends StatelessWidget {
  final DeviceModel? device;

  const FourSceneCreateGroup({super.key, this.device});

  @override
  Widget build(BuildContext context) {
    return DefaultScaffold(
      title: 'Create Group',
      child: BlocProvider(
        create: (context) => FourSceneBloc(fourSceneId: device?.uuid ?? '')
          ..add(const FourSceneInitial()),
        child: BlocBuilder<FourSceneBloc, FourSceneState>(
          builder: (context, state) {
            final sensor = BlocProvider.of<FourSceneBloc>(context);
            return state is LoadingNewSate
                ? const Center(
                    child: DefaultContainer(
                        width: 50,
                        height: 50,
                        child: CircularProgressIndicator()),
                  )
                : Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      children: [
                        const Padding(
                          padding: EdgeInsets.only(left: 25, right: 25),
                          child: BodySmall(
                            text:
                                'Devices in the same group can be controlled together',
                            fontColor: ColorsManager.primaryTextColor,
                            textAlign: TextAlign.center,
                          ),
                        ),
                        Flexible(
                          child: ListView.builder(
                            itemCount: sensor.groupDevices.length,
                            itemBuilder: (context, index) {
                              return InkWell(
                                onTap: () {
                                  BlocProvider.of<FourSceneBloc>(context).add(
                                      RemoveDeviceFromGroup(
                                          sensor.groupDevices[index],
                                          Assets.addDevicesIcon));
                                },
                                child: DefaultContainer(
                                    child: Padding(
                                  padding: const EdgeInsets.all(5.0),
                                  child: Row(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Row(
                                        children: [
                                          SvgPicture.asset(
                                            sensor.groupDevices[index].icon!,
                                            fit: BoxFit.contain,
                                          ),
                                          const SizedBox(
                                            width: 15,
                                          ),
                                          BodyMedium(
                                            text: sensor
                                                .groupDevices[index].name!,
                                            fontColor:
                                                ColorsManager.primaryTextColor,
                                            textAlign: TextAlign.center,
                                            fontSize: 15,
                                          ),
                                        ],
                                      ),
                                      BodyMedium(
                                        text: sensor.groupDevices[index].dec!,
                                        fontColor: ColorsManager.grayColor,
                                        textAlign: TextAlign.center,
                                        fontSize: 15,
                                      ),
                                    ],
                                  ),
                                )),
                              );
                            },
                          ),
                        ),
                        Flexible(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const BodyLarge(
                                text: 'Devices to be added',
                                fontColor: ColorsManager.grayColor,
                                textAlign: TextAlign.center,
                                fontSize: 12,
                                fontWeight: FontWeight.w700,
                              ),
                              const SizedBox(
                                height: 5,
                              ),
                              sensor.devices.isNotEmpty
                                  ? Expanded(
                                      child: ListView.builder(
                                        itemCount: sensor.devices.length,
                                        itemBuilder: (context, index) {
                                          final device = sensor.devices[index];
                                          return GestureDetector(
                                            onTap: () {
                                              BlocProvider.of<FourSceneBloc>(
                                                      context)
                                                  .add(AddDeviceToGroup(device,
                                                      Assets.minusIcon));
                                            },
                                            child: DefaultContainer(
                                              child: Padding(
                                                padding:
                                                    const EdgeInsets.all(5.0),
                                                child: Row(
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment.start,
                                                  mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceBetween,
                                                  children: [
                                                    Row(
                                                      children: [
                                                        SvgPicture.asset(
                                                          device.icon!,
                                                          fit: BoxFit.contain,
                                                        ),
                                                        const SizedBox(
                                                          width: 15,
                                                        ),
                                                        BodyMedium(
                                                          text: device.name!,
                                                          fontColor: ColorsManager
                                                              .primaryTextColor,
                                                          textAlign:
                                                              TextAlign.center,
                                                          fontSize: 15,
                                                        ),
                                                      ],
                                                    ),
                                                    BodyMedium(
                                                      text: device.dec!,
                                                      fontColor: ColorsManager
                                                          .grayColor,
                                                      textAlign:
                                                          TextAlign.center,
                                                      fontSize: 15,
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ),
                                          );
                                        },
                                      ),
                                    )
                                  : const Column(
                                      children: [
                                        BodySmall(
                                          text:
                                              'Currently no devices available to create group',
                                          fontColor: ColorsManager.grayColor,
                                          textAlign: TextAlign.center,
                                          fontSize: 12,
                                          fontWeight: FontWeight.w400,
                                        ),
                                      ],
                                    ),
                            ],
                          ),
                        ),
                        const Spacer()
                      ],
                    ),
                  );
          },
        ),
      ),
    );
  }
}