import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.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 PowerClampPhase extends StatelessWidget {
  const PowerClampPhase({
    super.key,
    required this.iconPath,
    required this.title,
    required this.value,
    this.unit,
  });

  final String iconPath;
  final String title;
  final String value;
  final String? unit;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        margin: const EdgeInsets.only(bottom: 4),
        decoration: containerWhiteDecoration.copyWith(boxShadow: const []),
        padding: const EdgeInsetsDirectional.all(8),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          spacing: 10,
          children: [
            _buildIcon(),
            Expanded(
              flex: 3,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                spacing: 4,
                children: [
                  _buildTitle(context),
                  _buildValue(context),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildValue(BuildContext context) {
    final textStyle = context.textTheme.bodySmall?.copyWith(
      color: ColorsManager.textPrimaryColor.withValues(
        alpha: 0.83,
      ),
      fontWeight: FontWeight.w700,
      fontSize: 15,
    );

    return Expanded(
      flex: 2,
      child: FittedBox(
        alignment: AlignmentDirectional.topCenter,
        fit: BoxFit.scaleDown,
        child: Text.rich(
          TextSpan(
            style: textStyle,
            children: [
              TextSpan(text: '$value '),
              if (unit != null)
                TextSpan(
                  text: unit,
                  style: textStyle?.copyWith(
                    color: ColorsManager.textPrimaryColor.withValues(
                      alpha: 0.83,
                    ),
                    fontWeight: FontWeight.w700,
                    fontSize: 8,
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildTitle(BuildContext context) {
    return Expanded(
      flex: 2,
      child: FittedBox(
        alignment: AlignmentDirectional.centerStart,
        fit: BoxFit.scaleDown,
        child: Text(
          title,
          style: context.textTheme.titleSmall?.copyWith(
            color: ColorsManager.lightGreyColor,
            fontWeight: FontWeight.w400,
            fontSize: 8,
          ),
        ),
      ),
    );
  }

  Widget _buildIcon() {
    return Expanded(
      child: FittedBox(
        fit: BoxFit.scaleDown,
        child: SvgPicture.asset(iconPath),
      ),
    );
  }
}
