flutter_application_1/lib/widgets/milestone_timeline_widget.dart

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

// Erstellt eine Zeitleiste für Meilensteine
Widget buildMilestoneTimeline(List<Map<String, dynamic>> milestones, double totalInterest) {
  return SizedBox(
    child: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: List.generate(milestones.length, (index) {
          double milestoneValue = milestones[index]['value'];
          String milestoneEmoji = milestones[index]['emoji'];
          String milestoneText = milestones[index]['text'];
          bool milestoneReached = totalInterest >= milestoneValue;  // Überprüfen, ob Meilenstein erreicht wurde
          return Column(
            children: [
              if (index > 0)
                Container(
                  height: 25,
                  width: 2,
                  color: milestoneReached ? CupertinoColors.systemGreen : CupertinoColors.black,  // Linie zwischen Meilensteinen
                ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 4.0),
                child: Column(
                  children: [
                    Text(
                      milestoneEmoji,
                      style: const TextStyle(fontSize: 20),  // Emoji für Meilenstein
                    ),
                    const SizedBox(height: 5),
                    Text(
                      milestoneText,
                      textAlign: TextAlign.center,
                    ),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 4.0),
                child: Icon(
                  milestoneReached ? CupertinoIcons.check_mark_circled_solid : CupertinoIcons.circle_fill,
                  size: 20,
                  color: milestoneReached ? CupertinoColors.systemGreen : CupertinoColors.black,  // Icon, das den Status des Meilensteins anzeigt
                ),
              ),
            ],
          );
        }),
      ),
    ),
  );
}

// Widget, welches den Meilenstein-Zeitstrahl auf eine neue Seite auslagert
@override  
Widget buildMilestonePage(BuildContext context, String compoundInterest, String investedMoney, List<Map<String, dynamic>> milestoneList) {
  return Scaffold(
    body: CustomScrollView(
      slivers: <Widget>[
        SliverToBoxAdapter(
          child: Container(
            padding: EdgeInsets.only(left: 10, right: 10, top: MediaQuery.of(context).padding.top + 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                IconButton(
                  icon: const Icon(CupertinoIcons.chevron_left, size: 15), // Zurück-Pfeil
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
                const Text(
                  'Grafik',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                const SizedBox(width: 40), // Platzhalter für zentrierte Ausrichtung
              ],
            ),
           ),
          ),
        SliverToBoxAdapter( // Meilenstein-Zeitstrahl anzeigen
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: buildMilestoneTimeline(milestoneList, double.parse(compoundInterest) - double.parse(investedMoney))
          ),
        ),
      ],
    ),
  );
}