import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:payment_plugin/domain/models/add_card_payment_method.dart';
import 'package:payment_plugin/domain/models/stored_payment_method.dart';
import 'package:payment_plugin/presentation/components/payment_card_image.dart';
import 'package:payment_plugin/themes/light_theme.dart';

class CardItem extends StatelessWidget {
  final StoredPaymentMethod paymentMethod;
  final bool isSelectedPaymentMethod;
  final VoidCallback? onSelect;
  final bool needsScaffold;

  const CardItem({
    super.key,
    required this.paymentMethod,
    required this.isSelectedPaymentMethod,
    this.onSelect,
    this.needsScaffold = false,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        PaymentCardImage(cardType: CardType.fromString(paymentMethod.brand)),
        const SizedBox(width: 12),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              paymentMethod.holderName,
              style: Theme.of(context).textTheme.bodySmall,
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                ..."**** **** **** ".characters.map((char) {
                  if (char == '*') {
                    return Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 1.0),
                      child: Container(
                        width: 5,
                        height: 5,
                        decoration: const BoxDecoration(
                            shape: BoxShape.circle, color: colorTertiary),
                      ),
                    );
                  }
                  return const SizedBox(width: 8);
                }),
                Text(
                  paymentMethod.lastFour,
                  style: Theme.of(context).textTheme.bodyMedium,
                ),
              ],
            ),
          ],
        ),
        const Expanded(child: SizedBox()),
        !needsScaffold ? InkWell(
          customBorder: const CircleBorder(),
          radius: 18,
          onTap: onSelect,
          child: isSelectedPaymentMethod
              ? SvgPicture.asset("assets/icons/ic_checkmark.svg", width: 24, height: 24)
              : Container(
                  width: 24,
                  height: 24,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(
                      color: colorTertiary,
                      width: 1.0,
                    ),
                  ),
                ),
        ) : const Icon(Icons.arrow_forward_ios, color: colorTertiary, size: 24),
      ],
    );
  }
}