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_leak_bloc/water_leak_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/water_leak_bloc/water_leak_event.dart';
import 'package:syncrow_app/features/devices/bloc/water_leak_bloc/water_leak_state.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/devices/model/water_leak_model.dart';
import 'package:syncrow_app/features/devices/view/widgets/water_leak/water_leak_notification_settings.dart';
import 'package:syncrow_app/features/devices/view/widgets/water_leak/water_leak_records_screen.dart';
import 'package:syncrow_app/features/shared_widgets/battery_bar.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';

class WaterLeakScreen extends StatelessWidget {
  final DeviceModel? device;

  const WaterLeakScreen({super.key, this.device});

  @override
  Widget build(BuildContext context) {
    return DefaultScaffold(
      title: device?.name ?? 'Water Leak',
      child: BlocProvider(
        create: (context) => WaterLeakBloc(WLId: device?.uuid ?? '')
          ..add(const WaterLeakInitial()),
        child: BlocBuilder<WaterLeakBloc, WaterLeakState>(
          builder: (context, state) {
            final waterLeakBloc = BlocProvider.of<WaterLeakBloc>(context);
            WaterLeakModel model = WaterLeakModel(
                batteryPercentage: 0, waterContactState: 'normal');
            if (state is LoadingNewSate) {
              model = state.waterSensor;
            } else if (state is UpdateState) {
              model = state.waterSensor;
            }
            return state is WaterLeakLoadingState
                ? const Center(
                    child: DefaultContainer(
                        width: 50,
                        height: 50,
                        child: CircularProgressIndicator()),
                  )
                : RefreshIndicator(
                    onRefresh: () async {
                      waterLeakBloc.add(const WaterLeakInitial());
                    },
                    child: ListView(
                      children: [
                        SizedBox(
                          height: MediaQuery.sizeOf(context).height * 0.8,
                          child: Column(
                            children: [
                              BatteryBar(
                                batteryPercentage: model.batteryPercentage,
                              ),
                              Expanded(
                                flex: 4,
                                child: InkWell(
                                  overlayColor: WidgetStateProperty.all(
                                      Colors.transparent),
                                  onTap: () {},
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    children: [
                                      Container(
                                        decoration: BoxDecoration(
                                          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(
                                          model.waterContactState == 'normal'
                                              ? Assets.normalWaterLeak
                                              : Assets.detectedWaterLeak,
                                          fit: BoxFit.fill,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                              Flexible(
                                child: Row(
                                  children: [
                                    Expanded(
                                      child: DefaultContainer(
                                        onTap: () {
                                          Navigator.of(context).push(
                                            MaterialPageRoute(
                                                builder: (context) =>
                                                    WaterLeakRecordsScreen(
                                                        WLId: device!.uuid!)),
                                          );
                                        },
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          children: [
                                            ConstrainedBox(
                                              constraints: const BoxConstraints(
                                                  maxHeight: 46, maxWidth: 50),
                                              child: SvgPicture.asset(
                                                  Assets.doorRecordsIcon),
                                            ),
                                            const SizedBox(
                                              height: 15,
                                            ),
                                            const Flexible(
                                              child: FittedBox(
                                                child: BodySmall(
                                                  text: 'Records',
                                                  textAlign: TextAlign.center,
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                    const SizedBox(
                                      width: 10,
                                    ),
                                    Expanded(
                                      child: DefaultContainer(
                                        onTap: () {
                                          Navigator.of(context).push(
                                            MaterialPageRoute(
                                                builder: (context) =>
                                                    NotificationSettingsPage()),
                                          );
                                        },
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          children: [
                                            ConstrainedBox(
                                              constraints: const BoxConstraints(
                                                  maxHeight: 46, maxWidth: 50),
                                              child: SvgPicture.asset(Assets
                                                  .doorNotificationSetting),
                                            ),
                                            const SizedBox(
                                              height: 15,
                                            ),
                                            const Flexible(
                                              child: FittedBox(
                                                child: BodySmall(
                                                  text: 'Notification Settings',
                                                  textAlign: TextAlign.center,
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  );
          },
        ),
      ),
    );
  }
}
