flutter_application_1/lib/widgets/interval_widget.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_application_1/enums.dart';
import 'package:flutter_application_1/utils.dart';

class IntervalWidget extends StatefulWidget {
  final String selectedInterval;
  final Function(String) onChanged;

  const IntervalWidget({
    super.key, 
    required this.selectedInterval, 
    required this.onChanged
  });

  @override
  IntervalWidgetState createState() => IntervalWidgetState();
}

class IntervalWidgetState extends State<IntervalWidget> {
  bool isExpanded = false; // Zustand, ob das Intervall-Auswahlfenster erweitert ist

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Row(
          children: [
            Text(
              'Ausschüttungsintervall',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 16,
              ),
            ),
            SizedBox(width: 5),
            // Tooltip mit Erklärung zum Ausschüttungsintervall
            Tooltip(
              message: 'Das Ausschüttungsintervall bezieht sich darauf, wie oft die Erträge aus Ihrer Investition ausgeschüttet werden.',
              triggerMode: TooltipTriggerMode.tap,
              decoration: BoxDecoration(
                color: CupertinoColors.black,
                borderRadius: BorderRadius.all(Radius.circular(5))
              ),
              textStyle: TextStyle(
                color: CupertinoColors.white,
              ),
              margin: EdgeInsets.all(20),
              child: Icon(CupertinoIcons.question_circle_fill, size: 15),
            ),
          ]
        ),
        CupertinoTextField(
          placeholder: 'Ausschüttungsintervall auswählen',
          readOnly: true,
          onTap: () {
            // Öffnet das ModalBottomSheet zur Auswahl des Ausschüttungsintervalls
            showModalBottomSheet(
              context: context,
              backgroundColor: CupertinoColors.black,
              builder: (BuildContext context) {
                return Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    // ListTile für jährliches Ausschüttungsintervall
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 8.0),
                      child: ListTile(
                        title: Text(
                          translateInterval(PayoutInterval.yearly),
                          style: const TextStyle(
                            fontWeight: FontWeight.bold,
                            color: CupertinoColors.white,
                          ),
                        ),
                        trailing: widget.selectedInterval == translateInterval(PayoutInterval.yearly) ? const Icon(CupertinoIcons.checkmark_alt, color: CupertinoColors.white,) : null,
                        onTap: () {
                          widget.onChanged(translateInterval(PayoutInterval.yearly));
                          Navigator.pop(context);
                        },
                      ),
                    ),
                    // ListTile für monatliches Ausschüttungsintervall
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 8.0),
                      child: ListTile(
                        title: Text(
                          translateInterval(PayoutInterval.monthly),
                          style: const TextStyle(
                            fontWeight: FontWeight.bold,
                            color: CupertinoColors.white,
                          ),
                        ),
                        trailing: widget.selectedInterval == translateInterval(PayoutInterval.monthly) ? const Icon(CupertinoIcons.checkmark_alt, color: CupertinoColors.white,) : null,
                        onTap: () {
                          widget.onChanged(translateInterval(PayoutInterval.monthly));
                          Navigator.pop(context);
                        },
                      ),
                    ),
                  ],
                );
              },
            ).then((value) {
              setState(() {
                isExpanded = false; // Setzt den Zustand auf nicht erweitert zurück, wenn das Modal geschlossen wird
              });
            });
            setState(() {
              isExpanded = true; // Setzt den Zustand auf erweitert
            });
          },
          // Suffix-Icon, das den Zustand anzeigt (erweitert oder nicht)
          suffix: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 5.0),
            child: Icon(isExpanded ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down),
          ),
          controller: TextEditingController(text: widget.selectedInterval), // Setzt den Text des Textfeldes auf das ausgewählte Intervall
          decoration: BoxDecoration(
            color: CupertinoColors.extraLightBackgroundGray,
            borderRadius: BorderRadius.circular(5),
          ),
          cursorColor: CupertinoColors.black,
        ),
        const SizedBox(height: 20),
      ],
    );
  }
}