import 'package:dropdown_search/dropdown_search.dart';
import 'package:flutter/material.dart';
import 'package:routemaster/routemaster.dart';

/// Eine Seite, die als Container für die verschiedenen Tabs der App dient.
///
/// Diese Seite enthält eine App-Bar mit einer Kontoauswahl sowie ein
/// Bottom-Navigation-Bar für die Navigation zwischen
/// Dashboard, Verlauf und Einstellungen.
class HomePage extends StatefulWidget {
  /// Erstellt eine neue Instanz der HomePage.
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String selected = 'Konto 1';

  @override
  Widget build(final BuildContext context) {
    final TabPageState tabPage = TabPage.of(context);

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        titleSpacing: 0,
        title: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 12),
          child: _accountSelect(),
        ),
      ),

      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
          child: TabBarView(
            controller: tabPage.controller,
            children: <Widget>[
              for (final PageStack stack in tabPage.stacks)
                PageStackNavigator(stack: stack),
            ],
          ),
        ),
      ),

      bottomNavigationBar: _bottomNav(tabPage),
    );
  }

  Widget _bottomNav(final TabPageState tabPage) =>
      BottomNavigationBar(
    currentIndex: tabPage.index,
    onTap: tabPage.controller.animateTo,
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(icon: Icon(Icons.dashboard), label: 'Dashboard'),
      BottomNavigationBarItem(icon: Icon(Icons.history), label: 'Verlauf'),
      BottomNavigationBarItem(
        icon: Icon(Icons.settings),
        label: 'Einstellungen',
      ),
    ],
  );

  Widget _accountSelect() =>
      DropdownSearch<String>(
        items:
            (final String filter, final LoadProps? infiniteScrollProps) =>
        <String>['Konto 1', 'Konto 2', 'Konto 3', 'Konto 4'],
        selectedItem: selected,
        onChanged: (final String? value) =>
            setState(() => selected = value!),
        popupProps: const PopupProps<String>.menu(
          showSearchBox: true,
          searchFieldProps: TextFieldProps(
            decoration: InputDecoration(
              hintText: 'Suchen...',
              contentPadding: EdgeInsets.symmetric(
                horizontal: 12,
                vertical: 8,
              ),
            ),
          ),
        ),
      );
}