
import 'package:flutter/material.dart';

import 'package:pshared/models/payment/type.dart';

import 'package:pweb/pages/payment_methods/icon.dart';
import 'package:pweb/utils/payment/label.dart';

import 'package:pweb/generated/i18n/app_localizations.dart';


class AddPaymentMethodButton extends StatelessWidget {
  final List<PaymentType> types;
  final Set<PaymentType> disabledTypes;
  final ValueChanged<PaymentType>? onAdd;
  final VoidCallback? onPressed;

  static const double _borderRadius = 14;
  static const double _iconSize = 18;
  static const double _iconTextSpacing = 8;
  static const double _menuIconSize = 18;
  static const double _menuIconTextSpacing = 8;
  static const double _buttonHeight = 70;
  static const EdgeInsets _buttonPadding = EdgeInsets.symmetric(
    horizontal: 14,
    vertical: 10,
  );
  static const FontWeight _labelWeight = FontWeight.w600;

  const AddPaymentMethodButton({
    super.key,
    required this.types,
    required this.disabledTypes,
    this.onAdd,
    this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final l10n = AppLocalizations.of(context)!;
    final hasEnabled = types.any((type) => !disabledTypes.contains(type));
    final borderColor = hasEnabled
        ? theme.colorScheme.primary.withValues(alpha: 0.5)
        : theme.colorScheme.onSurface.withValues(alpha: 0.2);
    final textColor = hasEnabled
        ? theme.colorScheme.primary
        : theme.colorScheme.onSurface.withValues(alpha: 0.4);

    final buttonChild = Container(
      height: _buttonHeight,
      padding: _buttonPadding,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(_borderRadius),
        border: Border.all(color: borderColor),
        color: theme.colorScheme.onSecondary,
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.add, size: _iconSize, color: textColor),
          const SizedBox(width: _iconTextSpacing),
          Text(
            l10n.addPaymentMethod,
            style: theme.textTheme.titleSmall?.copyWith(
              color: textColor,
              fontWeight: _labelWeight,
            ),
          ),
        ],
      ),
    );

    final onPressed = this.onPressed;
    if (onPressed != null) {
      return GestureDetector(
        onTap: hasEnabled ? onPressed : null,
        child: buttonChild,
      );
    }

    return PopupMenuButton<PaymentType>(
      enabled: hasEnabled,
      onSelected: onAdd,
      itemBuilder: (context) => types
          .map((type) {
            final isDisabled = disabledTypes.contains(type);
            return PopupMenuItem<PaymentType>(
              value: type,
              enabled: !isDisabled,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(
                    iconForPaymentType(type),
                    size: _menuIconSize,
                    color: isDisabled
                        ? theme.colorScheme.onSurface.withValues(alpha: 0.4)
                        : theme.colorScheme.onSurface,
                  ),
                  const SizedBox(width: _menuIconTextSpacing),
                  Text(getPaymentTypeLabel(context, type)),
                ],
              ),
            );
          })
          .toList(),
      child: buttonChild,
    );
  }
}
