import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
import 'package:mensaapp/modules/fetchMenu.dart';
import 'package:mensaapp/modules/ratingEmote.dart';
import 'package:mensaapp/modules/ratingStars.dart';
import 'package:mensaapp/providers/essenProvider.dart';
import 'package:mensaapp/providers/pageProvider.dart';
import 'package:provider/provider.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // Hintergrundbild
          Container(
            width: 1600,
            height: 750,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/backgrounds/Essen.jpg"),
                fit: BoxFit.cover, // Deckt den gesamten Bildschirm ab
                colorFilter: ColorFilter.mode(
                  Colors.white.withOpacity(0.2),
                  BlendMode.dstATop,
                ),
              ),
            ),
          ),
          // Vordergrundinhalte

          Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Consumer<PageProvider>(
                builder: (context, pageProvider, child) {
                  return Text(pageProvider.selectedEssenName, style: const TextStyle(fontSize: 40),);
                },
              ),
              const SizedBox(height: 30,),
              Container(
                decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.8),
                    borderRadius: const BorderRadius.only(
                        topLeft: Radius.circular(80),
                        bottomRight: Radius.circular(80))),
                height: 400,
                width: 600,
                padding: EdgeInsets.symmetric(horizontal: 20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        const Text(
                          "Geschmack*",
                          style: TextStyle(fontSize: 35),
                        ),
                        Consumer<EssenProvider>(
                          builder: (context, essenProvider, child) {
                            return RatingStars(
                              onRate: (value) {
                                essenProvider.setRatingGeschmack(value);
                              },
                              initRating: essenProvider.ratingGeschmack,
                            );
                          },
                        )
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        const Text(
                          "Qualität*",
                          style: TextStyle(fontSize: 35),
                        ),
                        Consumer<EssenProvider>(
                          builder: (context, essenProvider, child) {
                            return RatingStars(
                              onRate: (value) {
                                essenProvider.setRatingQuali(value);
                              },
                              initRating: essenProvider.ratingQuali,
                            );
                          },
                        )
                      ],
                    ),
                    const SizedBox(
                      height: 50,
                    ),
                    Consumer<EssenProvider>(
                      builder: (context, essenProvider, child) {
                        return TextFormField(
                          initialValue: essenProvider.freiText,
                          onChanged: (value) {
                            essenProvider.setFreiText(value);
                          },
                          autofocus: false,
                          maxLength: 500,
                          maxLines: 4,
                          decoration: InputDecoration(
                            labelText: "Dein Feedback (optional)",
                            labelStyle: const TextStyle(fontSize: 20),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(15),
                            ),
                          ),
                          style: TextStyle(fontSize: 20),
                        );
                      },
                    ),
                  ],
                ),
              ),
            ],
          )),
        ],
      ),
    );
  }
}