import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

import 'package:pshared/models/payment/methods/data.dart';
import 'package:pshared/models/payment/methods/type.dart';
import 'package:pshared/provider/payment/flow.dart';

import 'package:pweb/pages/payment_methods/form.dart';
import 'package:pweb/pages/payment_methods/widgets/section_title.dart';
import 'package:pweb/utils/dimensions.dart';
import 'package:pweb/utils/payment/availability.dart';
import 'package:pweb/utils/payment/selector_type.dart';
import 'package:pweb/utils/payment/label.dart';

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

//TODO Whole page sucks. Will redesign.
class PaymentInfoSection extends StatelessWidget {
  final AppDimensions dimensions;

  const PaymentInfoSection({
    super.key,
    required this.dimensions,
  });

  @override
  Widget build(BuildContext context) {
    final loc = AppLocalizations.of(context)!;
    final flowProvider = context.watch<PaymentFlowProvider>();
    final hasRecipient = flowProvider.hasRecipient;
    final MethodMap resolvedAvailableTypes = filterVisiblePaymentTypes(flowProvider.availableTypes);
    final disabledTypesForSelection = hasRecipient
        ? disabledPaymentTypes.difference(resolvedAvailableTypes.keys.toSet())
        : disabledPaymentTypes;
    final methodsForSelectedType = flowProvider.methodsForSelectedType;
    final selectedMethod = flowProvider.selectedMethod ??
        (methodsForSelectedType.isNotEmpty ? methodsForSelectedType.first : null);

    if (hasRecipient && resolvedAvailableTypes.isEmpty) {
      return Text(loc.recipientNoPaymentDetails);
    }

    final selectedType = flowProvider.selectedType;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SectionTitle(loc.paymentInfo),
        SizedBox(height: dimensions.paddingSmall),
        PaymentTypeSelector(
          availableTypes: resolvedAvailableTypes,
          selectedType: selectedType,
          disabledTypes: disabledTypesForSelection,
          onSelected: (type) => flowProvider.selectType(
            type,
            resetManualData: !hasRecipient,
          ),
        ),
        SizedBox(height: dimensions.paddingMedium),
        if (hasRecipient && methodsForSelectedType.length > 1)
          DropdownButtonFormField<PaymentMethod>(
            initialValue: selectedMethod,
            dropdownColor: Theme.of(context).colorScheme.onSecondary,
            decoration: InputDecoration(
              labelText: loc.paymentMethodDetails,
              border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
            ),
            items: methodsForSelectedType.map((method) {
              final description = getPaymentTypeDescription(context, method);
              final label = method.name.isNotEmpty ? '${method.name} - $description' : description;
              return DropdownMenuItem(
                value: method,
                child: Text(label),
              );
            }).toList(),
            onChanged: (value) {
              if (value != null) {
                flowProvider.selectMethod(value);
              }
            },
          ),
        if (hasRecipient && methodsForSelectedType.length > 1)
          SizedBox(height: dimensions.paddingMedium),
        PaymentMethodForm(
          selectedType: selectedType,
          onChanged: (data) {
            if (!hasRecipient) {
              flowProvider.setManualPaymentData(data);
            }
          },
          initialData: flowProvider.selectedPaymentData,
          isEditable: !hasRecipient,
        ),
      ],
    );
  }
}
