import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/range_of_aqi/range_of_aqi_bloc.dart';
import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart';
import 'package:syncrow_web/pages/analytics/modules/analytics/widgets/chart_informative_cell.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
import 'package:syncrow_web/pages/analytics/widgets/charts_loading_widget.dart';
import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';

class RangeOfAqiChartTitle extends StatelessWidget {
  const RangeOfAqiChartTitle({
    required this.isLoading,
    super.key,
  });

  final bool isLoading;

  static const List<(Color color, String title, bool hasBorder)> _colors = [
    (Color(0xFF962DFF), 'Max', false),
    (Color(0xFF93AAFD), 'Min', false),
    (Colors.transparent, 'Avg', true),
  ];

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        ChartsLoadingWidget(isLoading: isLoading),
        const Expanded(
          flex: 3,
          child: FittedBox(
            fit: BoxFit.scaleDown,
            alignment: AlignmentDirectional.centerStart,
            child: ChartTitle(title: Text('Range of AQI')),
          ),
        ),
        const Spacer(flex: 3),
        ..._colors.map(
          (e) {
            final (color, title, hasBorder) = e;
            return Expanded(
              child: IntrinsicHeight(
                child: FittedBox(
                  fit: BoxFit.fitWidth,
                  alignment: AlignmentDirectional.centerStart,
                  child: Padding(
                    padding: const EdgeInsetsDirectional.only(end: 16),
                    child: ChartInformativeCell(
                      title: Text(title),
                      color: color,
                      hasBorder: hasBorder,
                    ),
                  ),
                ),
              ),
            );
          },
        ),
        const Spacer(),
        Expanded(
          flex: 2,
          child: FittedBox(
            fit: BoxFit.scaleDown,
            alignment: AlignmentDirectional.centerEnd,
            child: AqiTypeDropdown(
              selectedAqiType: context.watch<RangeOfAqiBloc>().state.selectedAqiType,
              onChanged: (value) {
                final spaceTreeState = context.read<SpaceTreeBloc>().state;
                final spaceUuid = spaceTreeState.selectedSpaces.firstOrNull;
                if (value != null) {
                  context.read<RangeOfAqiBloc>().add(UpdateAqiTypeEvent(value));
                }

                if (spaceUuid == null) return;
              },
            ),
          ),
        ),
      ],
    );
  }
}
