import 'package:flutter/material.dart';
import 'package:routemaster/routemaster.dart';

import '../Misc/monthly_balance_chart.dart';
import 'input_fields.dart';
import 'transaction_list.dart';

/// Eine Seite, die den Trend von Transaktionen zeigt.
///
/// Die Seite zeigt einen Liniendiagramm für den Kontostand über die Zeit,
/// sowie eine Liste aller Transaktionen, die nach Monaten gruppiert sind.
/// Die Transaktionen können nach Name, Betrag und Zeitraum gefiltert werden.
class Trend extends StatefulWidget {
  /// Erstellt eine neue Instanz der Trend-Seite.
  const Trend({super.key});

  @override
  State<Trend> createState() => _TrendState();
}

class _TrendState extends State<Trend> {
  @override
  Widget build(final BuildContext context) {
    final Map<String, String> query = Routemaster.of(
      context,
    ).currentRoute.queryParameters;

    final String? name = query['name'];
    final double? amountMin = double.tryParse(query['amountMin'] ?? '');
    final double? amountMax = double.tryParse(query['amountMax'] ?? '');
    final DateTime? dateFrom = DateTime.tryParse(query['dateFrom'] ?? '');
    final DateTime? dateTo = DateTime.tryParse(query['dateTo'] ?? '');

    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              InputFields(
                name: name,
                amountMin: amountMin,
                amountMax: amountMax,
                dateFrom: dateFrom,
                dateTo: dateTo,
              ),
              const SizedBox(height: 24),

              MonthlyBalanceChart(
                name: name,
                amountMin: amountMin,
                amountMax: amountMax,
                dateFrom: (dateFrom != null)
                    ? DateTime(dateFrom.year, dateFrom.month, dateFrom.day - 1)
                    : null,
                dateTo: (dateTo != null)
                    ? DateTime(dateTo.year, dateTo.month, dateTo.day + 1)
                    : null,
              ),
              const SizedBox(height: 24),

              const Text(
                'Transaktionen',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 12),
              TransactionList(
                name: name,
                amountMin: amountMin,
                amountMax: amountMax,
                dateFrom: (dateFrom != null)
                    ? DateTime(dateFrom.year, dateFrom.month, dateFrom.day - 1)
                    : null,
                dateTo: (dateTo != null)
                    ? DateTime(dateTo.year, dateTo.month, dateTo.day + 1)
                    : null,
              ),
            ],
          ),
        ),
      ),
    );
  }
}