import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/three_touch_bloc/three_touch_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/three_touch_bloc/three_touch_event.dart';
import 'package:syncrow_app/features/devices/bloc/three_touch_bloc/three_touch_state.dart';
import 'package:syncrow_app/features/devices/model/group_three_touch_model.dart';
import 'package:syncrow_app/features/shared_widgets/devices_default_switch.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_small.dart';

class ThreeTouchList extends StatelessWidget {
  const ThreeTouchList(
      {super.key, required this.threeTouchList, required this.allSwitches});

  final List<GroupThreeTouchModel> threeTouchList;
  final bool allSwitches;

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ThreeTouchBloc, ThreeTouchState>(
      builder: (context, state) {
        return SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              const SizedBox(height: 10),
              const BodySmall(text: 'All Lights'),
              const SizedBox(height: 5),
              DevicesDefaultSwitch(
                off: 'OFF',
                on: 'ON',
                switchValue: allSwitches,
                action: () {
                  BlocProvider.of<ThreeTouchBloc>(context)
                      .add(GroupAllOnEvent());
                },
                secondAction: () {
                  BlocProvider.of<ThreeTouchBloc>(context)
                      .add(GroupAllOffEvent());
                },
              ),
              ListView.builder(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                padding: const EdgeInsets.all(0),
                itemCount: threeTouchList.length,
                itemBuilder: (context, index) {
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const SizedBox(height: 10),
                      BodySmall(
                          text:
                              '${threeTouchList[index].deviceName} beside light'),
                      const SizedBox(height: 5),
                      DevicesDefaultSwitch(
                        off: 'OFF',
                        on: 'ON',
                        switchValue: threeTouchList[index].firstSwitch,
                        action: () {
                          BlocProvider.of<ThreeTouchBloc>(context).add(
                              ChangeFirstSwitchStatusEvent(
                                  value: threeTouchList[index].firstSwitch,
                                  deviceId: threeTouchList[index].deviceId));
                        },
                      ),
                      const SizedBox(height: 10),
                      BodySmall(
                          text:
                              '${threeTouchList[index].deviceName} ceiling light'),
                      const SizedBox(height: 5),
                      DevicesDefaultSwitch(
                        off: 'OFF',
                        on: 'ON',
                        switchValue: threeTouchList[index].secondSwitch,
                        action: () {
                          BlocProvider.of<ThreeTouchBloc>(context).add(
                              ChangeSecondSwitchStatusEvent(
                                  value: threeTouchList[index].secondSwitch,
                                  deviceId: threeTouchList[index].deviceId));
                        },
                      ),
                      const SizedBox(height: 10),
                      BodySmall(
                          text:
                              '${threeTouchList[index].deviceName} spotlight'),
                      const SizedBox(height: 5),
                      DevicesDefaultSwitch(
                        off: 'OFF',
                        on: 'ON',
                        switchValue: threeTouchList[index].thirdSwitch,
                        action: () {
                          BlocProvider.of<ThreeTouchBloc>(context).add(
                              ChangeThirdSwitchStatusEvent(
                                  value: threeTouchList[index].thirdSwitch,
                                  deviceId: threeTouchList[index].deviceId));
                        },
                      ),
                    ],
                  );
                },
              ),
            ],
          ),
        );
      },
    );
  }
}
