import 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.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(),
        )
      ],
      child: MaterialApp(
          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, 0),
                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 pageProvider.pages[pageProvider.selectedPage];
        },
      ),
      bottomNavigationBar: Padding(
        padding: EdgeInsets.all(5),
        child: GNav(
          onTabChange: (index) {
            Provider.of<PageProvider>(context, listen: false).changePage(index);
          },
          gap: 8,
          style: GnavStyle.google,
          backgroundColor: Theme.of(context).colorScheme.surface,
          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",
            ),
          ],
        ),
      ),
    );
  }
}