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

import '../Controller/account_controller.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> {
  final AccountController _accountController = AccountController();

  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),

      floatingActionButtonLocation: ExpandableFab.location,
      floatingActionButton: _floatingActionButton(),
    );
  }

  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),
        ),
      ),
    ),
  );

  Widget _floatingActionButton() => ExpandableFab(
    openButtonBuilder: RotateFloatingActionButtonBuilder(
      child: const Icon(Icons.add),
    ),
    type: ExpandableFabType.up,
    childrenAnimation: ExpandableFabAnimation.none,
    distance: 70,
    children: <Widget>[
      _expandableButton(
        label: 'Neue Transaktion',
        icon: Icons.add,
        onPressed: () {},
      ),
      _expandableButton(
        label: 'Neues Konto',
        icon: Icons.account_balance_wallet,
        onPressed: () {
          _accountController.newAccountHandler(context);
        },
      ),
    ],
  );

  Widget _expandableButton({
    required final String label,
    required final IconData icon,
    required final VoidCallback onPressed,
  }) => GestureDetector(
    onTap: onPressed,
    child: Row(
      children: <Widget>[
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
          decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)),
          child: Text(label),
        ),
        const SizedBox(width: 12),
        FloatingActionButton.small(
          heroTag: null,
          onPressed: onPressed,
          child: Icon(icon),
        ),
      ],
    ),
  );
}