import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:payment_plugin/domain/models/stored_payment_method.dart';
import 'package:payment_plugin/presentation/components/remove_card_button.dart';
import 'package:payment_plugin/themes/light_theme.dart';

class EditCardDialog extends StatelessWidget {
  final StoredPaymentMethod storedPaymentMethod;
  final void Function() onRemoveCard;

  const EditCardDialog({
    super.key,
    required this.storedPaymentMethod,
    required this.onRemoveCard,
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final expirationDate =
        "${storedPaymentMethod.expiryMonth}/${storedPaymentMethod.expiryYear}";

    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const SizedBox(height: 12),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text("payment_cards_edit_card_title".tr(),
                style: Theme.of(context).textTheme.headlineLarge),
            IconButton(
              style: IconButton.styleFrom(
                backgroundColor: sandColor[40],
              ),
              onPressed: () {
                Navigator.of(context).pop();
              },
              icon: const Icon(Icons.close),
            ),
          ],
        ),
        const SizedBox(height: 36),
        Text(storedPaymentMethod.holderName,
            style: Theme.of(context).textTheme.headlineMedium),
        const SizedBox(height: 20),
        Container(
          height: 62,
          width: double.infinity,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            border: Border.all(color: colorDivider),
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("name_on_card_hint".tr(),
                    style: theme.textTheme.bodySmall
                        ?.copyWith(color: colorHeadlineText)),
                Text(
                  storedPaymentMethod.holderName,
                  style: theme.textTheme.headlineSmall,
                ),
              ],
            ),
          ),
        ),
        const SizedBox(height: 8),
        Container(
          height: 62,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            border: Border.all(color: colorDivider),
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("card_number_hint".tr(),
                    style: theme.textTheme.bodySmall
                        ?.copyWith(color: colorHeadlineText)),
                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(
                      storedPaymentMethod.lastFour,
                      style: theme.textTheme.headlineSmall,
                    )
                  ],
                ),
              ],
            ),
          ),
        ),
        const SizedBox(height: 4),
        Row(
          children: [
            Expanded(
              child: Container(
                height: 62,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  border: Border.all(color: colorDivider),
                ),
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 12.0, vertical: 10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("expiry_date_hint".tr(),
                          style: theme.textTheme.bodySmall
                              ?.copyWith(color: colorHeadlineText)),
                      Text(
                        expirationDate,
                        style: theme.textTheme.headlineSmall,
                      ),
                    ],
                  ),
                ),
              ),
            ),
            const SizedBox(width: 4),
            Expanded(
              child: Container(
                height: 62,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  border: Border.all(color: colorDivider),
                ),
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 12.0, vertical: 10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text("cvc_hint".tr(),
                          style: theme.textTheme.bodySmall
                              ?.copyWith(color: colorHeadlineText)),
                      
                      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);
                          }),
                        ],
                      ),
                      const SizedBox.shrink(),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
        const SizedBox(height: 24),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RemoveCardButton(onRemoveCard: () {
              onRemoveCard();
            }),
          ],
        ),
      ],
    );
  }
}