import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/analytics/models/power_clamp_energy_status.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:syncrow_web/utils/style.dart';

class PowerClampEnergyStatusWidget extends StatelessWidget {
  const PowerClampEnergyStatusWidget({
    super.key,
    required this.status,
  });

  final List<PowerClampEnergyStatus> status;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: secondarySection.copyWith(boxShadow: const []),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: List.generate(
          status.length * 2 - 1,
          (index) => index.isEven
              ? Expanded(child: _buildItem(context, status[index ~/ 2]))
              : _buildDivider(),
        ),
      ),
    );
  }

  Widget _buildItem(BuildContext context, PowerClampEnergyStatus item) {
    return Center(
      child: ListTile(
        titleAlignment: ListTileTitleAlignment.center,
        leading: SvgPicture.asset(
          item.iconPath,
          fit: BoxFit.scaleDown,
          alignment: AlignmentDirectional.centerEnd,
          height: 18,
          width: 18,
        ),
        contentPadding: const EdgeInsets.symmetric(horizontal: 20),
        title: Text(
          item.title,
          style: context.textTheme.bodySmall?.copyWith(
            color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
            fontWeight: FontWeight.w400,
            fontSize: 16,
          ),
          softWrap: true,
          maxLines: 2,
          overflow: TextOverflow.ellipsis,
        ),
        trailing: Text.rich(
          TextSpan(
            style: context.textTheme.bodySmall?.copyWith(
              color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
              fontWeight: FontWeight.w700,
              fontSize: 16,
            ),
            children: [
              TextSpan(text: '${item.value} '),
              TextSpan(
                text: item.unit,
                style: context.textTheme.bodySmall?.copyWith(
                  color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
                  fontWeight: FontWeight.w700,
                  fontSize: 8,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildDivider() {
    return Container(
      height: 1,
      decoration: const BoxDecoration(
        boxShadow: [
          BoxShadow(
            color: Color.fromARGB(20, 0, 0, 0),
            offset: Offset(0, 1),
            blurRadius: 1,
          ),
          BoxShadow(
            color: Color.fromARGB(30, 0, 0, 0),
            offset: Offset(0, -2),
            blurRadius: 3,
          ),
        ],
      ),
    );
  }
}
