import 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:mensaapp/providers/essenProvider.dart';
import 'package:mensaapp/providers/pageProvider.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (context) => PageProvider(),
        ),
        ChangeNotifierProvider(
          create: (context) => EssenProvider(),
        )
      ],
      child: MaterialApp(
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            colorScheme: const ColorScheme(
                primary: Color.fromRGBO(236, 92, 61, 1),
                onPrimary: Color.fromRGBO(240, 240, 240, 1),
                secondary: Color.fromRGBO(203, 203, 203, 1),
                onSecondary: Color.fromRGBO(60, 60, 60, 1),
                error: Colors.red,
                onError: Colors.white,
                surface: Colors.white,
                onSurface: Color.fromRGBO(60, 60, 60, 1),
                brightness: Brightness.light,
                tertiary: Color.fromRGBO(251, 216, 17, 1),
                onTertiary: Color.fromRGBO(60, 60, 60, 1)),
            useMaterial3: true,
          ),
          home: const MyHome()),
    );
  }
}

class MyHome extends StatelessWidget {
  const MyHome({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(
            Icons.home,
            size: 36,
            color: Theme.of(context).colorScheme.onPrimary,
          ),
          onPressed: () {
            // Aktion für diesen Button
          },
        ),
        title: Consumer<PageProvider>(
          // Consumer verwenden, um den dynamischen Titel anzuzeigen
          builder: (context, pageProvider, child) {
            return Container(
              height: 40,
              decoration: BoxDecoration(
                color: Theme.of(context).colorScheme.primaryContainer,
                borderRadius: BorderRadius.circular(15),
              ),
              alignment: Alignment.centerLeft,
              child: Text(
                pageProvider.titleString[pageProvider.selectedPage],
                // Hier wird der dynamische Titel angezeigt
                style: TextStyle(
                  color: Theme.of(context).colorScheme.onPrimary,
                  fontWeight: FontWeight.bold,
                ),
              ),
            );
          },
        ),
        backgroundColor: Theme.of(context).colorScheme.primary,
        actions: [
          IconButton(
            icon: Image.asset(
              'assets/flags/de.png',
              width: 34,
              height: 24,
              fit: BoxFit.cover,
            ), // Erster Button rechts
            onPressed: () {
              // Aktion für diesen Button
            },
          ),
          IconButton(
            icon: Image.asset(
              'assets/flags/fr.png',
              width: 34,
              height: 24,
              fit: BoxFit.cover,
            ), // Zweiter Button rechts
            onPressed: () {
              // Aktion für diesen Button
            },
          ),
          IconButton(
            icon: Image.asset(
              'assets/flags/en.png',
              width: 34,
              height: 24,
              fit: BoxFit.cover,
            ), // Dritter Button rechts
            onPressed: () {
              // Aktion für diesen Button
            },
          ),
        ],
      ),
      body: Consumer<PageProvider>(
        builder: (context, pageProvider, child) {
          return Stack(
            children: [
              pageProvider.pages[pageProvider.selectedPage],
              Positioned(
                left: 10,
                bottom: 10,
                child: IconButton.filled(
                  padding: const EdgeInsets.all(15),
                  onPressed: () {},
                  icon: const Icon(
                    Icons.delete,
                    size: 30,
                  ),
                  style: ButtonStyle(
                      shape: WidgetStateProperty.all(RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(17))),
                      backgroundColor: WidgetStateProperty.all(
                        Theme.of(context).colorScheme.primary,
                      )),
                ),
              )
            ],
          );
        },
      ),
      floatingActionButton: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const Text(
            "* Pflichtfeld",
            style: TextStyle(fontSize: 15),
          ),
          const SizedBox(
            height: 10,
          ),
          FloatingActionButton.extended(
            onPressed: () {},
            label: const Text(
              "Absenden",
              style: TextStyle(fontSize: 20),
            ),
            icon: const Icon(Icons.send),
          )
        ],
      ),
      bottomNavigationBar: Container(
        color: Theme.of(context).colorScheme.secondary,
        child: Padding(
          padding: const EdgeInsets.all(5),
          child: GNav(
            onTabChange: (index) {
              Provider.of<PageProvider>(context, listen: false)
                  .changePage(index);
            },
            gap: 8,
            style: GnavStyle.google,
            backgroundColor: Colors.transparent,
            color: Theme.of(context).colorScheme.onSurface,
            activeColor: Theme.of(context).colorScheme.onPrimary,
            tabBackgroundColor: Theme.of(context).colorScheme.primary,
            tabs: const [
              GButton(
                icon: Icons.fastfood_outlined,
                text: "Essen",
              ),
              GButton(
                icon: Icons.landscape,
                text: "Ambiente",
              ),
              GButton(
                icon: Icons.mood,
                text: "Service",
              ),
              GButton(
                icon: Icons.feedback,
                text: "Anmerkungen",
              ),
              GButton(
                icon: Icons.grass,
                text: "Spezielle Ernährung",
              ),
            ],
          ),
        ),
      ),
    );
  }
}