import 'package:flutter/cupertino.dart';
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/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';

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

  final bool value;
  final String code;
  final String deviceId;
  final String? icon;
  final String? description;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: ColorsManager.greyColor.withOpacity(0.2),
        border: Border.all(color: ColorsManager.boxDivider),
      ),
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ClipOval(
                  child: Container(
                color: ColorsManager.whiteColors,
                child: SvgPicture.asset(
                  icon ?? Assets.acDevice,
                  width: 60,
                  height: 60,
                  fit: BoxFit.cover,
                ),
              )),
              SizedBox(
                height: 20,
                width: 35,
                child: CupertinoSwitch(
                  activeColor: ColorsManager.dialogBlueTitle,
                  value: value,
                  onChanged: (newValue) {
                    context.read<AcBloc>().add(
                          AcControl(
                            deviceId: deviceId,
                            code: code,
                            value: newValue,
                          ),
                        );
                  },
                ),
              ),
            ],
          ),
          const Spacer(),
          Center(
            child: Text(
              description ?? 'ThermoState',
              style: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 14,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
