import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/device_managment/power_clamp/bloc/smart_power_bloc.dart';
import 'package:syncrow_web/pages/device_managment/power_clamp/bloc/smart_power_event.dart';
import 'package:syncrow_web/pages/device_managment/power_clamp/bloc/smart_power_state.dart';
import 'package:syncrow_web/pages/device_managment/power_clamp/view/phase_widget.dart';
import 'package:syncrow_web/pages/device_managment/power_clamp/view/power_chart.dart';
import 'package:syncrow_web/pages/device_managment/power_clamp/view/power_info_card.dart';
import 'package:syncrow_web/pages/device_managment/shared/device_controls_container.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';

//Smart Power Clamp
class SmartPowerDeviceControl extends StatelessWidget
    with HelperResponsiveLayout {
  final String deviceId;

  const SmartPowerDeviceControl({super.key, required this.deviceId});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => SmartPowerBloc(deviceId: deviceId)
        ..add(SmartPowerFetchDeviceEvent(deviceId)),
      child: BlocBuilder<SmartPowerBloc, SmartPowerState>(
        builder: (context, state) {
          final blocProvider = BlocProvider.of<SmartPowerBloc>(context);

          if (state is SmartPowerLoading) {
            return const Center(child: CircularProgressIndicator());
          } else if (state is FakeState) {
            return _buildStatusControls(
              currentPage: blocProvider.currentPage,
              context: context,
              blocProvider: blocProvider,
            );
          } else if (state is GetDeviceStatus) {
            return _buildStatusControls(
              currentPage: blocProvider.currentPage,
              context: context,
              blocProvider: blocProvider,
            );
          } else if (state is FilterRecordsState) {
            return _buildStatusControls(
              currentPage: blocProvider.currentPage,
              context: context,
              blocProvider: blocProvider,
            );
          }
          return const Center(child: CircularProgressIndicator());
          // }
        },
      ),
    );
  }

  Widget _buildStatusControls({
    required BuildContext context,
    required SmartPowerBloc blocProvider,
    required int currentPage,
  }) {
    PageController pageController = PageController(initialPage: currentPage);
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 50),
      child: DeviceControlsContainer(
        child: Column(
          children: [
            const Row(
              children: [
                Text(
                  'Live',
                  style: TextStyle(
                      fontSize: 32,
                      fontWeight: FontWeight.w700,
                      color: ColorsManager.textPrimaryColor),
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  PowerClampInfoCard(
                    iconPath: Assets.powerActiveIcon,
                    title: 'Active',
                    value: blocProvider.deviceStatus.status.general.dataPoints
                            .elementAtOrNull(2)
                            ?.value
                            .toString() ??
                        '',
                    unit: '',
                  ),
                  PowerClampInfoCard(
                    iconPath: Assets.voltMeterIcon,
                    title: 'Current',
                    value: blocProvider.deviceStatus.status.general.dataPoints
                            .elementAtOrNull(1)
                            ?.value
                            .toString() ??
                        '',
                    unit: ' A',
                  ),
                  PowerClampInfoCard(
                    iconPath: Assets.frequencyIcon,
                    title: 'Frequency',
                    value: blocProvider.deviceStatus.status.general.dataPoints
                            .elementAtOrNull(4)
                            ?.value
                            .toString() ??
                        '',
                    unit: ' Hz',
                  ),
                ],
              ),
            ),
            PhaseWidget(
              phaseData: blocProvider.phaseData,
            ),
            const SizedBox(
              height: 10,
            ),
            Container(
              padding: const EdgeInsets.only(
                top: 10,
                left: 20,
                right: 20,
                bottom: 10,
              ),
              decoration: BoxDecoration(
                color: ColorsManager.whiteColors,
                borderRadius: BorderRadius.circular(20),
              ),
              height: 300,
              child: Column(
                children: [
                  Container(
                    decoration: BoxDecoration(
                      color: ColorsManager.graysColor,
                      borderRadius: BorderRadius.circular(20),
                    ),
                    height: 50,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        IconButton(
                          icon: const Icon(Icons.arrow_left),
                          onPressed: blocProvider.currentPage <= 0
                              ? null
                              : () {
                                  blocProvider
                                      .add(SmartPowerArrowPressedEvent(-1));
                                  pageController.previousPage(
                                    duration: const Duration(milliseconds: 300),
                                    curve: Curves.easeInOut,
                                  );
                                },
                        ),
                        Text(
                          currentPage == 0
                              ? 'Total'
                              : currentPage == 1
                                  ? 'Phase A'
                                  : currentPage == 2
                                      ? 'Phase B'
                                      : 'Phase C',
                          style: const TextStyle(fontSize: 18),
                        ),
                        IconButton(
                          icon: const Icon(Icons.arrow_right),
                          onPressed: blocProvider.currentPage >= 3
                              ? null
                              : () {
                                  blocProvider
                                      .add(SmartPowerArrowPressedEvent(1));
                                  pageController.nextPage(
                                    duration: const Duration(milliseconds: 300),
                                    curve: Curves.easeInOut,
                                  );
                                },
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(
                    height: 5,
                  ),
                  Expanded(
                    flex: 2,
                    child: PageView(
                      controller: pageController,
                      onPageChanged: (int page) {
                        blocProvider.add(SmartPowerPageChangedEvent(page));
                      },
                      physics: const NeverScrollableScrollPhysics(),
                      children: [
                        EnergyConsumptionPage(
                          formattedDate:
                              '${blocProvider.dateTime!.day}/${blocProvider.dateTime!.month}/${blocProvider.dateTime!.year} ${blocProvider.endChartDate}',
                          onTap: () {
                            blocProvider.add(SelectDateEvent(context: context));
                            blocProvider.add(FilterRecordsByDateEvent(
                                selectedDate: blocProvider.dateTime!,
                                viewType: blocProvider
                                    .views[blocProvider.currentIndex]));
                          },
                          widget: blocProvider.dateSwitcher(),
                          chartData: blocProvider.energyDataList.isNotEmpty
                              ? blocProvider.energyDataList
                              : [
                                  EnergyData('12:00 AM', 4.0),
                                  EnergyData('01:00 AM', 3.5),
                                  EnergyData('02:00 AM', 3.8),
                                  EnergyData('03:00 AM', 3.2),
                                  EnergyData('04:00 AM', 4.0),
                                  EnergyData('05:00 AM', 3.4),
                                  EnergyData('06:00 AM', 3.2),
                                  EnergyData('07:00 AM', 3.5),
                                  EnergyData('08:00 AM', 3.8),
                                  EnergyData('09:00 AM', 3.6),
                                  EnergyData('10:00 AM', 3.9),
                                  EnergyData('11:00 AM', 4.0),
                                ],
                          totalConsumption: 10000,
                          date: blocProvider.formattedDate,
                        ),
                        EnergyConsumptionPage(
                          formattedDate:
                              '${blocProvider.dateTime!.day}/${blocProvider.dateTime!.month}/${blocProvider.dateTime!.year} ${blocProvider.endChartDate}',
                          onTap: () {
                            blocProvider.add(SelectDateEvent(context: context));
                          },
                          widget: blocProvider.dateSwitcher(),
                          chartData: blocProvider.energyDataList.isNotEmpty
                              ? blocProvider.energyDataList
                              : [
                                  EnergyData('12:00 AM', 4.0),
                                  EnergyData('01:00 AM', 3.5),
                                  EnergyData('02:00 AM', 3.8),
                                  EnergyData('03:00 AM', 3.2),
                                  EnergyData('04:00 AM', 4.0),
                                  EnergyData('05:00 AM', 3.4),
                                  EnergyData('06:00 AM', 3.2),
                                  EnergyData('07:00 AM', 3.5),
                                  EnergyData('08:00 AM', 3.8),
                                  EnergyData('09:00 AM', 3.6),
                                  EnergyData('10:00 AM', 3.9),
                                  EnergyData('11:00 AM', 4.0),
                                ],
                          totalConsumption: 10000,
                          date: blocProvider.formattedDate,
                        ),
                        EnergyConsumptionPage(
                          formattedDate:
                              '${blocProvider.dateTime!.day}/${blocProvider.dateTime!.month}/${blocProvider.dateTime!.year} ${blocProvider.endChartDate}',
                          onTap: () {
                            blocProvider.add(SelectDateEvent(context: context));
                          },
                          widget: blocProvider.dateSwitcher(),
                          chartData: blocProvider.energyDataList.isNotEmpty
                              ? blocProvider.energyDataList
                              : [
                                  EnergyData('12:00 AM', 4.0),
                                  EnergyData('01:00 AM', 6.5),
                                  EnergyData('02:00 AM', 3.8),
                                  EnergyData('03:00 AM', 3.2),
                                  EnergyData('04:00 AM', 6.0),
                                  EnergyData('05:00 AM', 3.4),
                                  EnergyData('06:00 AM', 5.2),
                                  EnergyData('07:00 AM', 3.5),
                                  EnergyData('08:00 AM', 3.8),
                                  EnergyData('09:00 AM', 5.6),
                                  EnergyData('10:00 AM', 6.9),
                                  EnergyData('11:00 AM', 6.0),
                                ],
                          totalConsumption: 10000,
                          date: blocProvider.formattedDate,
                        ),
                        EnergyConsumptionPage(
                          formattedDate:
                              '${blocProvider.dateTime!.day}/${blocProvider.dateTime!.month}/${blocProvider.dateTime!.year} ${blocProvider.endChartDate}',
                          onTap: () {
                            blocProvider.add(SelectDateEvent(context: context));
                          },
                          widget: blocProvider.dateSwitcher(),
                          chartData: blocProvider.energyDataList.isNotEmpty
                              ? blocProvider.energyDataList
                              : [
                                  EnergyData('12:00 AM', 4.0),
                                  EnergyData('01:00 AM', 6.5),
                                  EnergyData('02:00 AM', 3.8),
                                  EnergyData('03:00 AM', 3.2),
                                  EnergyData('04:00 AM', 6.0),
                                  EnergyData('05:00 AM', 3.4),
                                  EnergyData('06:00 AM', 5.2),
                                  EnergyData('07:00 AM', 3.5),
                                  EnergyData('08:00 AM', 6.8),
                                  EnergyData('09:00 AM', 5.6),
                                  EnergyData('10:00 AM', 3.9),
                                  EnergyData('11:00 AM', 4.0),
                                ],
                          totalConsumption: 10000,
                          date: blocProvider.formattedDate,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
