import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/device_managment/ac/bloc/ac_bloc.dart';
import 'package:syncrow_web/pages/device_managment/ac/bloc/ac_event.dart';
import 'package:syncrow_web/pages/device_managment/shared/device_controls_container.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/app_enum.dart';
import 'package:syncrow_web/utils/constants/assets.dart';

class AcMode extends StatelessWidget {
  const AcMode({
    super.key,
    required this.value,
    required this.code,
    required this.deviceId,
  });

  final TempModes value;
  final String code;
  final String deviceId;

  @override
  Widget build(BuildContext context) {
    return DeviceControlsContainer(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          _buildIconContainer(context, TempModes.cold, Assets.freezing,
              value == TempModes.cold),
          _buildIconContainer(
              context, TempModes.hot, Assets.acSun, value == TempModes.hot),
          _buildIconContainer(context, TempModes.wind, Assets.acAirConditioner,
              value == TempModes.wind),
        ],
      ),
    );
  }

  Widget _buildIconContainer(
      BuildContext context, TempModes mode, String assetPath, bool isSelected) {
    return Flexible(
      child: GestureDetector(
        onTap: () {
          context.read<AcBloc>().add(
                AcControlEvent(
                  deviceId: deviceId,
                  code: code,
                  value: mode.name,
                ),
              );
        },
        child: Container(
          width: 50,
          height: 50,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: ColorsManager.whiteColors,
            border: Border.all(
              color: isSelected ? Colors.blue : Colors.transparent,
              width: 2.0,
            ),
          ),
          margin: const EdgeInsets.symmetric(horizontal: 4),
          padding: const EdgeInsets.all(4),
          child: ClipOval(
            child: SvgPicture.asset(
              assetPath,
              fit: BoxFit.contain,
            ),
          ),
        ),
      ),
    );
  }
}
