flutter_application_1/lib/widgets/interval_widget.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.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() {
    final localizations = AppLocalizations.of(context)!;
    final isMobile = Theme.of(context).platform == TargetPlatform.iOS || Theme.of(context).platform == TargetPlatform.android;

    return OverlayEntry(
      builder: (context) => Positioned(
        width: 160,
        child: CompositedTransformFollower(
          link: _layerLink,
          showWhenUnlinked: false,
          offset: Offset(0.0, isMobile ? 70 : 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(
                  contentPadding: const EdgeInsets.symmetric(horizontal: 15.0),
                  title: Text(
                    localizations.yearly,
                    style: const TextStyle(
                      color: CupertinoColors.black,
                      fontSize: 16,
                    ),
                  ),
                  trailing: widget.selectedInterval == localizations.yearly
                      ? const Icon(CupertinoIcons.checkmark_alt, color: CupertinoColors.black, size: 20,)
                      : null,
                  onTap: () {
                    widget.onChanged(localizations.yearly);
                    _toggleDropdown();
                  },
                ),
                // ListTile für monatliches Ausschüttungsintervall
                ListTile(
                  contentPadding: const EdgeInsets.symmetric(horizontal: 15.0),
                  title: Text(
                    localizations.monthly,
                    style: const TextStyle(
                      color: CupertinoColors.black,
                      fontSize: 16,
                    ),
                  ),
                  trailing: widget.selectedInterval == localizations.monthly
                      ? const Icon(CupertinoIcons.checkmark_alt, color: CupertinoColors.black, size: 20,)
                      : null,
                  onTap: () {
                    widget.onChanged(localizations.monthly);
                    _toggleDropdown();
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final localizations = AppLocalizations.of(context)!;

    return CompositedTransformTarget(
      link: _layerLink,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Text(
                localizations.payout_interval,
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 16,
                ),
              ),
              const SizedBox(width: 5),
              // Tooltip mit Erklärung zum Ausschüttungsintervall
              Tooltip(
                message: localizations.payout_interval_tooltiptext,
                triggerMode: TooltipTriggerMode.tap,
                decoration: const BoxDecoration(
                  color: CupertinoColors.black,
                  borderRadius: BorderRadius.all(Radius.circular(5))
                ),
                textStyle: const TextStyle(
                  color: CupertinoColors.white,
                ),
                margin: const EdgeInsets.all(20),
                child: const Icon(CupertinoIcons.question_circle_fill, size: 15),
              ),
            ]
          ),
          Container(
            alignment: Alignment.centerLeft,
            width: 160,
            child: ElevatedButton(
              onPressed: _toggleDropdown,
              style: ButtonStyle(
                padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
                  const EdgeInsets.symmetric(horizontal: 15.0),
                ),
                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
                        style: const TextStyle(
                      color: CupertinoColors.black,
                      fontSize: 16,
                    ),
                    ),
                  ),
                  Icon(isExpanded ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down, size: 20,),
                ],
              ),
            ),
          ),
          const SizedBox(height: 20),
        ],
      ),
    );
  }
}