import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/device_managment/schedule_device/schedule_widgets/schedual_view.dart';
import 'package:syncrow_web/pages/device_managment/schedule_device/schedule_widgets/schedule_control_button.dart';
import 'package:syncrow_web/pages/device_managment/three_gang_switch/bloc/living_room_bloc.dart';
import 'package:syncrow_web/pages/device_managment/three_gang_switch/factories/living_room_bloc_factory.dart';
import 'package:syncrow_web/pages/device_managment/three_gang_switch/models/living_room_model.dart';
import 'package:syncrow_web/pages/device_managment/shared/toggle_widget.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';

class LivingRoomDeviceControlsView extends StatelessWidget
    with HelperResponsiveLayout {
  final String deviceId;

  const LivingRoomDeviceControlsView({super.key, required this.deviceId});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => LivingRoomBlocFactory.create(deviceId: deviceId)
        ..add(LivingRoomFetchDeviceStatusEvent(deviceId)),
      child: BlocBuilder<LivingRoomBloc, LivingRoomState>(
        builder: (context, state) {
          if (state is LivingRoomDeviceStatusLoading) {
            return const Center(child: CircularProgressIndicator());
          } else if (state is LivingRoomDeviceStatusLoaded) {
            return _buildStatusControls(context, state.status);
          } else if (state is LivingRoomDeviceManagementError ||
              state is LivingRoomControlError) {
            return const Center(child: Text('Error fetching status'));
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }

  Widget _buildStatusControls(
      BuildContext context, LivingRoomStatusModel status) {
    final isExtraLarge = isExtraLargeScreenSize(context);
    final isLarge = isLargeScreenSize(context);
    final isMedium = isMediumScreenSize(context);
    return GridView(
      padding: const EdgeInsets.symmetric(horizontal: 50),
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: isLarge || isExtraLarge
            ? 3
            : isMedium
                ? 2
                : 1,
        mainAxisExtent: 140,
        crossAxisSpacing: 12,
        mainAxisSpacing: 12,
      ),
      children: [
        ToggleWidget(
          value: status.switch1,
          code: 'switch_1',
          deviceId: deviceId,
          label: 'Wall Light',
          onChange: (value) {
            context.read<LivingRoomBloc>().add(
                  LivingRoomControl(
                      deviceId: deviceId, code: 'switch_1', value: value),
                );
          },
        ),
        ToggleWidget(
          value: status.switch2,
          code: 'switch_2',
          deviceId: deviceId,
          label: 'Ceiling Light',
          onChange: (value) {
            context.read<LivingRoomBloc>().add(
                  LivingRoomControl(
                      deviceId: deviceId, code: 'switch_2', value: value),
                );
          },
        ),
        ToggleWidget(
          value: status.switch3,
          code: 'switch_3',
          deviceId: deviceId,
          label: 'Spotlight',
          onChange: (value) {
            context.read<LivingRoomBloc>().add(
                  LivingRoomControl(
                      deviceId: deviceId, code: 'switch_3', value: value),
                );
          },
        ),
        ScheduleControlButton(
          onTap: () {
            showDialog<void>(
                context: context,
                builder: (ctx) => BlocProvider.value(
                      value: BlocProvider.of<LivingRoomBloc>(context),
                      child: BuildScheduleView(
                        deviceUuid: deviceId,
                        category: 'switch_1',
                        countdownCode: 'countdown_1',
                        deviceType: '3G',
                      ),
                    ));
          },
          mainText: 'Wall Light',
          subtitle: 'Scheduling',
          iconPath: Assets.scheduling,
        ),
        ScheduleControlButton(
          onTap: () {
            showDialog<void>(
                context: context,
                builder: (ctx) => BlocProvider.value(
                      value: BlocProvider.of<LivingRoomBloc>(context),
                      child: BuildScheduleView(
                        deviceUuid: deviceId,
                        category: 'switch_2',
                        countdownCode: 'countdown_2',
                        deviceType: '3G',
                      ),
                    ));
          },
          mainText: 'Ceiling Light',
          subtitle: 'Scheduling',
          iconPath: Assets.scheduling,
        ),
        ScheduleControlButton(
          onTap: () {
            showDialog<void>(
                context: context,
                builder: (ctx) => BlocProvider.value(
                      value: BlocProvider.of<LivingRoomBloc>(context),
                      child: BuildScheduleView(
                        deviceUuid: deviceId,
                        category: 'switch_3',
                        countdownCode: 'countdown_3',
                        deviceType: '3G',
                      ),
                    ));
          },
          mainText: 'Spotlight',
          subtitle: 'Scheduling',
          iconPath: Assets.scheduling,
        ),
      ],
    );
  }
}
