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
  final LayerLink _layerLink = LayerLink(); // LayerLink für den Overlay

  OverlayEntry? _overlayEntry;

  void _toggleDropdown() {
    if (isExpanded) {
      _overlayEntry?.remove();
      _overlayEntry = null;
      setState(() {
        isExpanded = false;
      });
    } else {
      _overlayEntry = _createOverlayEntry();
      Overlay.of(context).insert(_overlayEntry!);
      setState(() {
        isExpanded = true;
      });
    }
  }

  OverlayEntry _createOverlayEntry() {
    return OverlayEntry(
      builder: (context) => Positioned(
        width: 160,
        child: CompositedTransformFollower(
          link: _layerLink,
          showWhenUnlinked: false,
          offset: const Offset(0.0, 60),
          child: Material(
            color: CupertinoColors.extraLightBackgroundGray,
            borderRadius: BorderRadius.circular(5),
            elevation: 4.0,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                // ListTile für jährliches Ausschüttungsintervall
                ListTile(
                  title: Text(
                    translateInterval(PayoutInterval.yearly),
                    style: const TextStyle(
                      color: CupertinoColors.black,
                      fontSize: 14,
                    ),
                  ),
                  trailing: widget.selectedInterval == translateInterval(PayoutInterval.yearly)
                      ? const Icon(CupertinoIcons.checkmark_alt, color: CupertinoColors.black)
                      : null,
                  onTap: () {
                    widget.onChanged(translateInterval(PayoutInterval.yearly));
                    _toggleDropdown();
                  },
                ),
                // ListTile für monatliches Ausschüttungsintervall
                ListTile(
                  title: Text(
                    translateInterval(PayoutInterval.monthly),
                    style: const TextStyle(
                      color: CupertinoColors.black,
                    ),
                  ),
                  trailing: widget.selectedInterval == translateInterval(PayoutInterval.monthly)
                      ? const Icon(CupertinoIcons.checkmark_alt, color: CupertinoColors.black)
                      : null,
                  onTap: () {
                    widget.onChanged(translateInterval(PayoutInterval.monthly));
                    _toggleDropdown();
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return CompositedTransformTarget(
      link: _layerLink,
      child: 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: _toggleDropdown,
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all<Color>(CupertinoColors.extraLightBackgroundGray),
                foregroundColor: MaterialStateProperty.all<Color>(CupertinoColors.black),
                overlayColor: MaterialStateProperty.all<Color>(CupertinoColors.extraLightBackgroundGray),
                surfaceTintColor: MaterialStateProperty.all<Color>(CupertinoColors.extraLightBackgroundGray),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(5),
                  ),
                ),
              ),
              child: Row(
                children: [
                  Expanded(
                    child: Text(
                        widget.selectedInterval, // Text des ausgewählten Intervalls
                      ),
                  ),
                  Icon(isExpanded ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down),
                ],
              ),
            ),
          ),
          const SizedBox(height: 20),
        ],
      ),
    );
  }
}