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/devices_cubit.dart';
import 'package:syncrow_app/features/devices/model/device_control_model.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/generated/assets.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

class GangSwitch extends StatelessWidget {
  const GangSwitch({
    super.key,
    required this.threeGangSwitch,
    required this.control,
  });

  final DeviceModel threeGangSwitch;

  final DeviceControlModel control;

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<DevicesCubit, DevicesState>(
      builder: (context, state) {
        return InkWell(
          overlayColor: MaterialStateProperty.all(Colors.transparent),
          onTap: () {
            var tempControl = DeviceControlModel(
                deviceId: control.deviceId,
                code: control.code!,
                value: !control.value!);
            DevicesCubit.getInstance().deviceControl(
              tempControl,
              control.deviceId!,
            );
          },
          child: Stack(
            alignment:
                !control.value! ? Alignment.topCenter : Alignment.bottomCenter,
            children: [
              Container(
                decoration: BoxDecoration(
                  borderRadius: const BorderRadius.all(Radius.circular(100.0)),
                  color: threeGangSwitch.status
                          .firstWhere((element) => element.code == control.code)
                          .value!
                      ? ColorsManager.primaryColorWithOpacity
                      : ColorsManager.switchOffColor,
                ),
                width: 60,
                height: 115,
              ),
              Padding(
                padding: const EdgeInsets.all(5.0),
                child: SizedBox.square(
                  dimension: 60,
                  child: state is GetDeviceStatusLoading &&
                              state.code == control.code ||
                          state is DeviceControlSuccess &&
                              state.code == control.code ||
                          state is DeviceControlLoading &&
                              state.code == control.code
                      ? const SizedBox(
                          width: 10,
                          height: 10,
                          child: Center(child: CircularProgressIndicator()))
                      : SvgPicture.asset(
                          control.value!
                              ? Assets.iconsLightSwitchOn
                              : Assets.iconsLightSwitchOff,
                          fit: BoxFit.fill,
                        ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}