import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/analytics/models/device_energy_data_model.dart';
import 'package:syncrow_web/utils/color_manager.dart';

class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
  const EnergyConsumptionPerDeviceDevicesList({required this.chartData, super.key});

  final List<DeviceEnergyDataModel> chartData;

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        spacing: 16,
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: chartData.map((e) => _buildDeviceCell(context, e)).toList(),
      ),
    );
  }

  Widget _buildDeviceCell(BuildContext context, DeviceEnergyDataModel device) {
    return Container(
      height: MediaQuery.sizeOf(context).height * 0.0365,
      padding: const EdgeInsetsDirectional.symmetric(
        vertical: 8,
        horizontal: 12,
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadiusDirectional.circular(8),
        border: Border.all(
          color: ColorsManager.greyColor,
          width: 1,
        ),
      ),
      child: FittedBox(
        fit: BoxFit.scaleDown,
        alignment: Alignment.center,
        child: Row(
          spacing: 6,
          children: [
            CircleAvatar(
              radius: 4,
              backgroundColor: device.color,
            ),
            Text(
              device.deviceName,
              textAlign: TextAlign.center,
              style: const TextStyle(
                color: ColorsManager.blackColor,
                fontWeight: FontWeight.w400,
                fontSize: 14,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
