import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_app/features/devices/bloc/water_heater_bloc/water_heater_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/water_heater_bloc/water_heater_event.dart';
import 'package:syncrow_app/features/devices/bloc/water_heater_bloc/water_heater_state.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/devices/model/water_heater.dart';
import 'package:syncrow_app/features/devices/view/widgets/water_heater/wh_timer_schedule_screen.dart';
import 'package:syncrow_app/features/shared_widgets/default_container.dart';
import 'package:syncrow_app/features/shared_widgets/default_scaffold.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_small.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';

class WaterHeaterPage extends StatelessWidget {
  final DeviceModel? device;
  const WaterHeaterPage({super.key, this.device});

  @override
  Widget build(BuildContext context) {
    return DefaultScaffold(
      title: device?.name?? 'Water heater',
      child: BlocProvider(
        create: (context) => WaterHeaterBloc(switchCode: 'switch_1', whId: device?.uuid ?? '')
          ..add(const WaterHeaterInitial()),
        child: BlocBuilder<WaterHeaterBloc, WaterHeaterState>(
          builder: (context, state) {
            final waterHeaterBloc = BlocProvider.of<WaterHeaterBloc>(context);
            WHModel whModel = WHModel(firstCountDown: 0, firstSwitch: false);
            if (state is LoadingNewSate) {
              whModel = state.whModel;
            } else if (state is UpdateState) {
              whModel = state.whModel;
            }
            return state is WHLoadingState
                ? const Center(
                    child:
                        DefaultContainer(width: 50, height: 50, child: CircularProgressIndicator()),
                  )
                : RefreshIndicator(
                    onRefresh: () async {
                      waterHeaterBloc.add(const WaterHeaterInitial());
                    },
                    child: Center(
                      child: ListView(
                        shrinkWrap: true,
                        children: [
                          Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              InkWell(
                                overlayColor: MaterialStateProperty.all(Colors.transparent),
                                onTap: () {
                                  waterHeaterBloc.add(
                                    WaterHeaterSwitch(whSwitch: whModel.firstSwitch),
                                  );
                                },
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    Container(
                                      decoration: BoxDecoration(
                                        // color: Colors.white.withOpacity(0.1),
                                        borderRadius: BorderRadius.circular(890),
                                        boxShadow: [
                                          BoxShadow(
                                            color: Colors.white.withOpacity(0.1),
                                            blurRadius: 24,
                                            offset: const Offset(-5, -5),
                                            blurStyle: BlurStyle.outer,
                                          ),
                                          BoxShadow(
                                            color: Colors.black.withOpacity(0.11),
                                            blurRadius: 25,
                                            offset: const Offset(5, 5),
                                            blurStyle: BlurStyle.outer,
                                          ),
                                          BoxShadow(
                                            color: Colors.black.withOpacity(0.13),
                                            blurRadius: 30,
                                            offset: const Offset(5, 5),
                                            blurStyle: BlurStyle.inner,
                                          ),
                                        ],
                                      ),
                                      child: SvgPicture.asset(
                                        whModel.firstSwitch
                                            ? Assets.waterHeaterOn
                                            : Assets.waterHeaterOff,
                                        fit: BoxFit.fill,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              const SizedBox(height: 80),
                              SizedBox(
                                child: Column(
                                  children: [
                                    Card(
                                      elevation: 3,
                                      shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(100),
                                      ),
                                      child: GestureDetector(
                                        onTap: () {
                                          Navigator.push(
                                              context,
                                              PageRouteBuilder(
                                                  pageBuilder: (context, animation1, animation2) =>
                                                      WHTimerScheduleScreen(
                                                        switchCode: 'switch_1',
                                                        device: device!,
                                                        deviceCode: 'countdown_1',
                                                      )));
                                        },
                                        child: Stack(
                                          alignment: Alignment.center,
                                          children: [
                                            Container(
                                              width: 60,
                                              height: 60,
                                              decoration: BoxDecoration(
                                                color: Colors.grey[300],
                                                borderRadius: BorderRadius.circular(100),
                                              ),
                                            ),
                                            Container(
                                              width: 40,
                                              height: 40,
                                              decoration: BoxDecoration(
                                                color: Colors.white,
                                                borderRadius: BorderRadius.circular(100),
                                              ),
                                              child: Center(
                                                child: Icon(
                                                  Icons.access_time,
                                                  color: ColorsManager.primaryColorWithOpacity,
                                                  size: 25,
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                    const SizedBox(height: 10),
                                    BodySmall(
                                      text: "Timer",
                                      style: context.bodyMedium.copyWith(
                                        color: ColorsManager.textPrimaryColor,
                                      ),
                                    ),
                                  ],
                                ),
                              )
                            ],
                          ),
                        ],
                      ),
                    ),
                  );
          },
        ),
      ),
    );
  }
}
