import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/device_managment/shared/icon_name_status_container.dart';
import 'package:syncrow_web/pages/device_managment/shared/table/report_table.dart';
import 'package:syncrow_web/pages/device_managment/water_leak/bloc/water_leak_bloc.dart';
import 'package:syncrow_web/pages/device_managment/water_leak/bloc/water_leak_event.dart';
import 'package:syncrow_web/pages/device_managment/water_leak/bloc/water_leak_state.dart';
import 'package:syncrow_web/pages/device_managment/water_leak/widgets/water_leak_notifi_dialog.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';

class WaterLeakView extends StatelessWidget with HelperResponsiveLayout {
  final String deviceId;

  const WaterLeakView({Key? key, required this.deviceId}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final isExtraLarge = isExtraLargeScreenSize(context);
    final isLarge = isLargeScreenSize(context);
    final isMedium = isMediumScreenSize(context);
    return BlocProvider(
      create: (context) => WaterLeakBloc(deviceId)..add(FetchWaterLeakStatusEvent(deviceId)),
      child: BlocBuilder<WaterLeakBloc, WaterLeakState>(
        builder: (context, state) {
          if (state is WaterLeakLoadingState) {
            return const Center(child: CircularProgressIndicator());
          } else if (state is WaterLeakLoadedState) {
            return GridView(
              shrinkWrap: true,
              padding: const EdgeInsets.symmetric(horizontal: 50),
              physics: const NeverScrollableScrollPhysics(),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: isExtraLarge || isLarge
                    ? 3
                    : isMedium
                        ? 2
                        : 1,
                mainAxisExtent: 140,
                crossAxisSpacing: 12,
                mainAxisSpacing: 12,
              ),
              children: [
                IconNameStatusContainer(
                  isFullIcon: false,
                  name: state.status.watersensorState == 'normal' ? 'Normal' : 'Leak Detection',
                  icon: state.status.watersensorState == 'normal' ? Assets.waterLeakNormal : Assets.waterLeakDetected,
                  onTap: () {},
                  status: state.status.watersensorState == 'normal',
                  textColor: state.status.watersensorState == 'normal' ? ColorsManager.blackColor : ColorsManager.red,
                ),
                IconNameStatusContainer(
                  isFullIcon: false,
                  name: 'Records',
                  icon: Assets.records,
                  onTap: () {
                    context.read<WaterLeakBloc>().add(FetchWaterLeakReportsEvent(
                          deviceId: deviceId,
                          code: 'watersensor_state',
                          from: DateTime.now().subtract(const Duration(days: 30)).millisecondsSinceEpoch,
                          to: DateTime.now().millisecondsSinceEpoch,
                        ));
                  },
                  status: false,
                  textColor: ColorsManager.blackColor,
                ),
                IconNameStatusContainer(
                  isFullIcon: false,
                  name: 'Automation Record',
                  icon: Assets.automationRecords,
                  onTap: () {},
                  status: false,
                  textColor: ColorsManager.blackColor,
                ),
                IconNameStatusContainer(
                  isFullIcon: false,
                  name: 'Notifications\nSettings',
                  icon: Assets.mainDoorNotifi,
                  onTap: () {
                    showDialog(
                      context: context,
                      builder: (context) => const WaterLeakNotificationDialog(),
                    );
                  },
                  status: false,
                  textColor: ColorsManager.blackColor,
                  paddingAmount: 14,
                ),
              ],
            );
          } else if (state is WaterLeakReportsLoadingState) {
            return const Center(child: CircularProgressIndicator());
          } else if (state is WaterLeakReportsLoadedState) {
            return ReportsTable(
              report: state.deviceReport,
              hideValueShowDescription: true,
              waterLeak: true,
              onRowTap: (index) {},
              onClose: () {
                context.read<WaterLeakBloc>().add(FetchWaterLeakStatusEvent(deviceId));
              },
            );
          } else if (state is WaterLeakReportsFailedState) {
            return Center(child: Text('Error: ${state.error}'));
          } else if (state is WaterLeakErrorState) {
            return Center(child: Text('Error: ${state.message}'));
          } else {
            return const Center(child: Text('No data available'));
          }
        },
      ),
    );
  }
}
