import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:sleek_circular_slider/sleek_circular_slider.dart';
import 'package:syncrow_app/features/devices/bloc/acs_bloc/acs_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/acs_bloc/acs_event.dart';
import 'package:syncrow_app/features/devices/bloc/acs_bloc/acs_state.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/shared_widgets/default_container.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/generated/assets.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
import 'package:syncrow_app/utils/resource_manager/font_manager.dart';

class AcInterfaceTempUnit extends StatelessWidget {
  const AcInterfaceTempUnit({
    super.key,
    required this.acDevice,
  });

  final DeviceModel acDevice;

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ACsBloc, AcsState>(
      builder: (context, state) {
        return DefaultContainer(
          child: Column(
            children: [
              Expanded(
                flex: 8,
                child: SizedBox(
                  width: 300,
                  child: SleekCircularSlider(
                    appearance: CircularSliderAppearance(
                      customWidths: CustomSliderWidths(
                        progressBarWidth: 15,
                        trackWidth: 15,
                        shadowWidth: 0,
                      ),
                      customColors: CustomSliderColors(
                        progressBarColor: ColorsManager.primaryColor.withOpacity(.6),
                        trackColor: ColorsManager.greyColor,
                        dotColor: Colors.transparent,
                      ),
                      infoProperties: InfoProperties(
                        bottomLabelText: 'CURRENT TEMP',
                        bottomLabelStyle: context.bodyLarge.copyWith(
                          color: Colors.grey,
                          fontWeight: FontsManager.regular,
                        ),
                        modifier: (double value) {
                          double temp = state is GetAcStatusState
                              ? state.acStatusModel.currentTemp / 10
                              : state is AcModifyingState
                                  ? state.acStatusModel.currentTemp / 10
                                  : state is AcChangeLoading
                                      ? state.acStatusModel.currentTemp / 10
                                      : 25;
                          return '$temp°C';
                        },
                        mainLabelStyle: context.titleLarge.copyWith(
                          height: 0,
                          letterSpacing: -3,
                          color: Colors.black,
                          fontSize: 60,
                          shadows: [
                            Shadow(
                              color: Colors.black.withOpacity(0.5),
                              offset: const Offset(0, 3),
                              blurRadius: 6,
                            ),
                          ],
                        ),
                      ),
                    ),
                    min: 20,
                    max: 30,
                    initialValue: state is GetAcStatusState
                        ? state.acStatusModel.tempSet / 10
                        : state is AcModifyingState
                            ? state.acStatusModel.tempSet / 10
                            : state is AcChangeLoading
                                ? state.acStatusModel.tempSet / 10
                                : 25,
                  ),
                ),
              ),
              Expanded(
                flex: 2,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    SizedBox.square(
                      dimension: 24,
                      child: InkWell(
                        onTap: () {
                          if (state is AcChangeLoading) {
                            return;
                          }

                          double tempValue = 0;
                          if (state is AcModifyingState) {
                            tempValue = state.acStatusModel.tempSet / 10;
                          } else if (state is GetAcStatusState) {
                            tempValue = state.acStatusModel.tempSet / 10;
                          }

                          if (tempValue > 20) {
                            BlocProvider.of<ACsBloc>(context)
                                .add(DecreaseCoolToTemp(value: tempValue));
                          }
                        },
                        child: SvgPicture.asset(
                          Assets.assetsIconsMinus,
                        ),
                      ),
                    ),
                    Column(
                      children: [
                        BodyLarge(
                          // text: "${DeviceModel.coolTo}° C",
                          text: state is GetAcStatusState
                              ? '${state.acStatusModel.tempSet / 10}° C'
                              : state is AcModifyingState
                                  ? '${state.acStatusModel.tempSet / 10}° C'
                                  : state is AcChangeLoading
                                      ? '${state.acStatusModel.tempSet / 10}° C'
                                      : '',
                          style: context.bodyLarge.copyWith(
                              color: state is AcsLoadingState
                                  ? Colors.grey
                                  : ColorsManager.primaryColor.withOpacity(0.6),
                              fontWeight: FontsManager.bold,
                              fontSize: 30,
                              height: 0),
                        ),
                        const BodyMedium(
                          text: 'COOL TO',
                          fontSize: 18,
                        )
                      ],
                    ),
                    SizedBox.square(
                      dimension: 24,
                      child: InkWell(
                        onTap: () {
                          if (state is AcChangeLoading) {
                            return;
                          }
                          double tempValue = 0;
                          if (state is AcModifyingState) {
                            tempValue = state.acStatusModel.tempSet / 10;
                          } else if (state is GetAcStatusState) {
                            tempValue = state.acStatusModel.tempSet / 10;
                          } else if (state is AcChangeLoading) {
                            tempValue = state.acStatusModel.tempSet / 10;
                          }

                          if (tempValue < 30) {
                            BlocProvider.of<ACsBloc>(context)
                                .add(IncreaseCoolToTemp(value: tempValue));
                          }
                        },
                        child: SvgPicture.asset(
                          Assets.assetsIconsPlus,
                          height: 24,
                          width: 24,
                        ),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        );
      },
    );
  }
}
