import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:tablet_app/Models/tabletContext.dart';
import 'package:tablet_app/app_context.dart';
import 'package:tablet_app/constants.dart';
import 'package:webview_flutter/webview_flutter.dart';

class LanguageSelection extends StatefulWidget {
  LanguageSelection();

  @override
  _LanguageSelection createState() => _LanguageSelection();
}

class _LanguageSelection extends State<LanguageSelection> with TickerProviderStateMixin {
  List<String>? languagesEnable;
  Size sizeScreen = new Size(1080.0, 1920.0); // Tablet resolution

  double flagSize = 60;

  String? selectedLanguage;
  double? elementMinimizedSize;
  bool minimized = false;
  double? _leftLanguage;
  double? _topLanguage;
  double? _rightLanguage;
  double? _bottomLanguage;

  AnimationController? _controller;

  @override
  void initState() {
    setState(() {
      _leftLanguage =  sizeScreen.width - (sizeScreen.width *0.07); //size.width - size.width *0.07;
      _topLanguage = sizeScreen.height * 0.075;
      _rightLanguage = 0;
      _bottomLanguage = minimized ? sizeScreen.height*0.6 : sizeScreen.height - (sizeScreen.height *0.07);
    });

    _controller = AnimationController(
        value: 12, vsync: this, duration: Duration(seconds: 1));
    _controller!.animateBack(0);

    super.initState();
  }

  @override
  void dispose() {
    _controller!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    Size size = MediaQuery.of(context).size;
    selectedLanguage = (appContext.getContext() as TabletAppContext).language;
    languagesEnable = (appContext.getContext() as TabletAppContext).configuration!.languages;

    return Stack(
      children: [
        Positioned(
            top: 0,
            right: 0,
            child: Padding(
              padding: const EdgeInsets.only(right: 0.0, top: 25.0),
              child: InkWell(
                onTap: () {
                  minimizedAnimation(size);
                },
                child: Container(
                  height: size.height *0.07,//size.height *0.07,
                  width: size.width *0.07,//size.width *0.07,
                  decoration: flagDecoration(selectedLanguage!),
                ),
              ),
            )
        ),
        AnimatedPositioned(
          duration: const Duration(milliseconds: 1500),
          curve: Curves.fastLinearToSlowEaseIn,
          top: _topLanguage,
          left: _leftLanguage,
          right: _rightLanguage,
          bottom: _bottomLanguage,
          child: Container(
            child:
            ListView(
              children: [
                if(minimized) ... [
                  for(var language in languagesEnable!.where((element) => element.toUpperCase() != selectedLanguage ))
                    InkWell(
                      onTap: () {
                        setState(() {
                          // TODO STORE IT LOCALLY !!
                          TabletAppContext tabletAppContext = appContext.getContext();
                          tabletAppContext.language = language;
                          appContext.setContext(tabletAppContext);
                          minimizedAnimation(size);
                        });
                      },
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          width: sizeScreen.height *0.07,
                          height: sizeScreen.width *0.07,
                          decoration: flagDecoration(language),
                        ),
                      ),
                    )
                ]
              ],
            )
            ,
          ),
        ),
      ],
    );
  }

  minimizedAnimation(Size size) {
    minimized = !minimized;
    if (minimized) {
      _controller!.animateBack(15.0);
    } else {
      _controller!.animateBack(0.0);
    }
    setState(() {
      _leftLanguage =  size.width - (size.width *0.07); //size.width - size.width *0.07;
      _topLanguage = sizeScreen.height * 0.07;
      _rightLanguage = 0;
      _bottomLanguage = minimized ? size.height*0.6 : size.height - (size.height *0.07);
    });
  }

  flagDecoration(String language) {
    return BoxDecoration(
      color: kBackgroundColor,
      shape: BoxShape.circle,
      //border: Border.all(width: 1.5, color: kSecondGrey),
      image: new DecorationImage(
        fit: BoxFit.contain,
        image: new AssetImage("assets/images/"+language+".png"),
      ),
      boxShadow: [
        BoxShadow(
          color: kSecondGrey,
          spreadRadius: 0.5,
          blurRadius: 5,
          offset: Offset(0, 1.5), // changes position of shadow
        ),
      ],
    );
  }
}