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 FanSpeedControl extends StatelessWidget {
  const FanSpeedControl({
    super.key,
    required this.value,
    required this.code,
    required this.deviceId,
  });

  final FanSpeeds value;
  final String code;
  final String deviceId;

  @override
  Widget build(BuildContext context) {
    return DeviceControlsContainer(
      child: Column(
        children: [
          Wrap(
            runSpacing: 8,
            spacing: 8,
            children: [
              _buildIconContainer(context, FanSpeeds.auto, Assets.acFanAuto,
                  value == FanSpeeds.auto),
              _buildIconContainer(context, FanSpeeds.low, Assets.acFanLow,
                  value == FanSpeeds.low),
            ],
          ),
          const SizedBox(height: 8),
          Wrap(
            runSpacing: 8,
            spacing: 8,
            children: [
              _buildIconContainer(context, FanSpeeds.middle, Assets.acFanMiddle,
                  value == FanSpeeds.middle),
              _buildIconContainer(context, FanSpeeds.high, Assets.acFanHigh,
                  value == FanSpeeds.high),
            ],
          )
        ],
      ),
    );
  }

  Widget _buildIconContainer(BuildContext context, FanSpeeds speed,
      String assetPath, bool isSelected) {
    return GestureDetector(
      onTap: () {
        context.read<AcBloc>().add(
              AcControlEvent(
                deviceId: deviceId,
                code: code,
                value: speed.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,
          ),
        ),
        padding: const EdgeInsets.all(8),
        child: ClipOval(
          child: SvgPicture.asset(
            assetPath,
            fit: BoxFit.contain,
          ),
        ),
      ),
    );
  }
}
