import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/analytics/models/analytics_device.dart';
import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_devices/analytics_devices_bloc.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/fetch_energy_management_data_helper.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/analytics_device_dropdown.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';

class AnalyticsSidebarHeader extends StatelessWidget {
  const AnalyticsSidebarHeader({
    required this.title,
    this.showSpaceUuidInDevicesDropdown = false,
    this.onChanged,
    super.key,
  });

  final String title;
  final bool showSpaceUuidInDevicesDropdown;
  final void Function(AnalyticsDevice device)? onChanged;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Expanded(
              flex: 2,
              child: FittedBox(
                alignment: AlignmentDirectional.centerStart,
                fit: BoxFit.scaleDown,
                child: SelectableText(
                  title,
                  style: context.textTheme.headlineSmall?.copyWith(
                    fontWeight: FontWeight.w700,
                    color: ColorsManager.vividBlue.withValues(alpha: 0.6),
                    fontSize: 18,
                  ),
                ),
              ),
            ),
            const Spacer(),
            Expanded(
              flex: 2,
              child: FittedBox(
                alignment: AlignmentDirectional.centerEnd,
                fit: BoxFit.scaleDown,
                child: AnalyticsDeviceDropdown(
                  showSpaceUuid: showSpaceUuidInDevicesDropdown,
                  onChanged: (value) {
                    context.read<AnalyticsDevicesBloc>().add(
                          SelectAnalyticsDeviceEvent(value),
                        );
                    FetchEnergyManagementDataHelper.loadRealtimeDeviceChanges(
                      context,
                      deviceUuid: value.uuid,
                    );
                    onChanged?.call(value);
                  },
                ),
              ),
            ),
          ],
        ),
        Text(
          'Device ID:',
          style: context.textTheme.bodySmall?.copyWith(
            color: ColorsManager.textPrimaryColor,
            fontWeight: FontWeight.w400,
            fontSize: 12,
          ),
        ),
        const SizedBox(height: 6),
        SelectableText(
          context.watch<AnalyticsDevicesBloc>().state.selectedDevice?.uuid ?? 'N/A',
          style: context.textTheme.bodySmall?.copyWith(
            color: ColorsManager.blackColor,
            fontWeight: FontWeight.w400,
            fontSize: 12,
          ),
        ),
        const SizedBox(height: 10),
        const Divider(height: 1, color: ColorsManager.greyColor),
        const SizedBox(height: 24),
      ],
    );
  }
}
