import 'package:flutter/material.dart';
import 'package:mensaapp/providers/languageProvider.dart';
import 'package:mensaapp/providers/serviceProvider.dart';
import 'package:provider/provider.dart';

import '../modules/ratingStars.dart';

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

  @override
  Widget build(BuildContext context) {
    final FocusNode _focus = FocusNode();

    return Consumer<LanguageProvider>(builder: (context, languageProvider, child){
      return GestureDetector(
        onTap: () {
          _focus.unfocus();
        },
        child: Scaffold(
          body: Stack(
            children: [
              Center(
                child: Container(
                  width: MediaQuery.of(context).size.width * 0.8,
                  height: MediaQuery.of(context).size.height,
                  decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage("assets/backgrounds/Service.jpg"),
                        fit: BoxFit.cover,
                        colorFilter: ColorFilter.mode(
                            Colors.white.withOpacity(0.6),
                            BlendMode.dstATop
                        ),
                      )
                  ),
                ),
              ),
              Center(
                child: SingleChildScrollView(
                  child: Container(
                    decoration: BoxDecoration(
                        color: Colors.white.withOpacity(0.9),
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(80),
                            bottomRight: Radius.circular(80)
                        )
                    ),
                    width: 600,
                    height: 400,
                    padding: EdgeInsets.symmetric(horizontal: 20),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              Provider.of<LanguageProvider>(context).languageData[Provider.of<LanguageProvider>(context).language]["pageService"]["question1"],
                              style: TextStyle(fontSize: 30),
                            ),
                            Consumer<ServiceProvider>(
                              builder: (context, essenProvider, child) {
                                return RatingStars(onRate: (value) {
                                  essenProvider.setRatingFrage1(value);
                                }, initRating: essenProvider.ratingFrage1,);
                              },
                            )
                          ],
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              Provider.of<LanguageProvider>(context).languageData[Provider.of<LanguageProvider>(context).language]["pageService"]["question2"],
                              style: TextStyle(fontSize: 35),
                            ),
                            Consumer<ServiceProvider>(
                              builder: (context, essenProvider, child) {
                                return RatingStars(onRate: (value) {
                                  essenProvider.setRatingFrage2(value);
                                }, initRating: essenProvider.ratingFrage2,);
                              },
                            )
                          ],
                        ),
                        const SizedBox(
                          height: 50,
                        ),
                        Consumer<ServiceProvider>(
                          builder: (context, essenProvider, child) {
                            return TextFormField(
                              initialValue: essenProvider.freiText,
                              onChanged: (value) {
                                essenProvider.setFreiText(value);
                              },
                              autofocus: false,
                              maxLength: 500,
                              maxLines: 4,
                              focusNode: _focus,
                              decoration: InputDecoration(
                                labelText: Provider.of<LanguageProvider>(context).languageData[Provider.of<LanguageProvider>(context).language]["textfield"],
                                labelStyle: const TextStyle(fontSize: 20),
                                border: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(15)
                                ),
                              ),
                              style: TextStyle(fontSize: 20),
                            );
                          },
                        )
                      ],
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      );
    });
  }
}