import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

import 'package:pshared/controllers/balance_mask/wallets.dart';
import 'package:pshared/models/payment/wallet.dart';
import 'package:pshared/utils/currency.dart';

import 'package:pweb/utils/money_display.dart';


class BalanceAmount extends StatelessWidget {
  final Wallet wallet;
  final VoidCallback onToggleMask;

  const BalanceAmount({
    super.key,
    required this.wallet,
    required this.onToggleMask,
  });

  static const double _iconSpacing = 12.0;
  static const double _iconSize = 24.0;

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    final colorScheme = Theme.of(context).colorScheme;
    final currencyBalance = currencyCodeToSymbol(wallet.currency);
    final formattedBalance = formatAmountUi(
      context,
      amount: wallet.balance,
      currency: currencyCodeToString(wallet.currency),
    );
    final wallets = context.watch<WalletsController>();
    final isMasked = wallets.isBalanceMasked(wallet.id);

    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(
          isMasked ? '•••• $currencyBalance' : formattedBalance,
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: textTheme.headlineMedium?.copyWith(
            fontWeight: FontWeight.bold,
            color: colorScheme.primary,
          ),
        ),
        const SizedBox(width: _iconSpacing),
        GestureDetector(
          onTap: onToggleMask,
          child: Icon(
            isMasked ? Icons.visibility_off : Icons.visibility,
            size: _iconSize,
            color: colorScheme.primary,
          ),
        ),
      ],
    );
  }
}