import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

import 'package:pweb/controllers/payouts/quotation.dart';
import 'package:pweb/models/dashboard/quote_status_data.dart';
import 'package:pweb/pages/dashboard/payouts/amount/widget.dart';
import 'package:pweb/pages/dashboard/payouts/fee_payer.dart';
import 'package:pweb/pages/dashboard/payouts/quote_status/widgets/card.dart';
import 'package:pweb/pages/dashboard/payouts/quote_status/widgets/refresh_section.dart';
import 'package:pweb/pages/dashboard/payouts/summary/widget.dart';

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


class PaymentFormWidget extends StatelessWidget {
  const PaymentFormWidget({super.key});

  static const double _smallSpacing = 5;
  static const double _mediumSpacing = 12;
  static const double _largeSpacing = 20;
  static const double _extraSpacing = 15;
  static const double _columnSpacing = 24;
  static const double _narrowWidth = 560;


  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final loc = AppLocalizations.of(context)!;
    final controller = context.watch<QuotationController>();
    final quoteStatus = QuoteStatusData.resolve(
      controller: controller,
      loc: loc,
    );

    return LayoutBuilder(
      builder: (context, constraints) {
        final isNarrow = constraints.maxWidth < _narrowWidth;

        final detailsHeader = Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(loc.details, style: theme.textTheme.titleMedium),
            const SizedBox(height: _smallSpacing),
          ],
        );

        final quoteCard = QuoteStatusCard(
          statusType: quoteStatus.statusType,
          isLoading: quoteStatus.isLoading,
          statusText: quoteStatus.statusText,
          helperText: quoteStatus.helperText,
          canRefresh: quoteStatus.canRefresh,
          showPrimaryRefresh: quoteStatus.showPrimaryRefresh,
          onRefresh: controller.refreshQuotation,
        );

        final autoRefreshSection = QuoteAutoRefreshSection(
          autoRefreshMode: quoteStatus.autoRefreshMode,
          canRefresh: quoteStatus.canRefresh,
          onModeChanged: controller.setAutoRefreshMode,
        );

        final leftColumn = Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const PaymentAmountWidget(),
            const SizedBox(height: _smallSpacing),
            FeePayerSwitch(
              spacing: _smallSpacing,
              style: theme.textTheme.bodySmall,
            ),
            const SizedBox(height: _mediumSpacing),
            const PaymentSummary(spacing: _extraSpacing),
          ],
        );

        final rightColumn = Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            quoteCard,
            const SizedBox(height: _smallSpacing),
            autoRefreshSection,
          ],
        );

        if (isNarrow) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              detailsHeader,
              leftColumn,
              const SizedBox(height: _largeSpacing),
              rightColumn,
            ],
          );
        }

        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            detailsHeader,
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                  flex: 3,
                  child: const PaymentAmountWidget(),
                ),
                const SizedBox(width: _columnSpacing),
                Expanded(flex: 2, child: quoteCard),
              ],
            ),
            const SizedBox(height: _smallSpacing),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  flex: 3,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      FeePayerSwitch(
                        spacing: _smallSpacing,
                        style: theme.textTheme.bodySmall,
                      ),
                      const SizedBox(height: _mediumSpacing),
                      const PaymentSummary(spacing: _extraSpacing),
                    ],
                  ),
                ),
                const SizedBox(width: _columnSpacing),
                Expanded(
                  flex: 2,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      autoRefreshSection,
                    ],
                  ),
                ),
              ],
            ),
          ],
        );
      },
    );
  }
}