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

// Widget zur Auswahl des Ausschüttungsintervalls
class IntervalWidget extends StatefulWidget {
  final String selectedInterval; // Das aktuell ausgewählte Intervall
  final Function(String) onChanged; // Funktion, die aufgerufen wird, wenn das Intervall geändert wird

  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),
            ),
          ]
        ),
        Container(
          alignment: Alignment.centerLeft,
          width: 160,
          child: ElevatedButton(
            onPressed: () {
              // Ö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
              });
            },
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all<Color>(CupertinoColors.black),
              foregroundColor: MaterialStateProperty.all<Color>(CupertinoColors.white),
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(5),
                ),
              ),
            ),
            child: Row(
              children: [
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8.0),
                    child: Text(
                      widget.selectedInterval, // Text des ausgewählten Intervalls
                      textAlign: TextAlign.left,
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(right: 8.0),
                  child: Icon(isExpanded ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down),
                ),
              ],
            ),
          ),
        ),
        const SizedBox(height: 20),
      ],
    );
  }
}