import 'package:flutter/material.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/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';

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

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ChartsLoadingWidget(isLoading: isLoading),
        Expanded(
          flex: 4,
          child: FittedBox(
            alignment: AlignmentDirectional.centerStart,
            fit: BoxFit.scaleDown,
            child: ChartTitle(
              title: Text(
                'Energy Consumption by Phases',
                style: context.textTheme.titleLarge?.copyWith(
                  fontSize: 14,
                  fontWeight: FontWeight.w400,
                  color: ColorsManager.textPrimaryColor,
                ),
              ),
            ),
          ),
        ),
        const Spacer(),
        ...<(String title, double opacity)>[
          ('A', 0.8),
          ('B', 0.4),
          ('C', 0.15),
        ].map((phase) => _buildPhaseCell(context, phase)),
      ],
    );
  }

  Widget _buildPhaseCell(
    BuildContext context,
    (String title, double colorOpacity) phase,
  ) {
    final (title, colorOpacity) = phase;

    return Expanded(
      child: FittedBox(
        fit: BoxFit.scaleDown,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          spacing: 4,
          children: [
            CircleAvatar(
              backgroundColor: ColorsManager.vividBlue.withValues(
                alpha: colorOpacity,
              ),
              radius: 4,
            ),
            Text(
              'Phase $title',
              style: context.textTheme.labelSmall?.copyWith(
                fontSize: 8,
                fontWeight: FontWeight.w400,
                color: ColorsManager.lightGreyColor,
              ),
            ),
            const SizedBox(width: 4),
          ],
        ),
      ),
    );
  }
}
