import 'package:flutter/foundation.dart';
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:flutter_svg_provider/flutter_svg_provider.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 = kIsWeb ? sizeScreen.width - (sizeScreen.width *0.07) : sizeScreen.width - (sizeScreen.width *0.07); //size.width - size.width *0.07;
      _topLanguage = kIsWeb ? sizeScreen.height * 0.07 : sizeScreen.height * 0.075;
      _rightLanguage = 0;
      _bottomLanguage = minimized ? (kIsWeb ? sizeScreen.height*0.8 : sizeScreen.height*0.6) : (kIsWeb ? sizeScreen.height - (sizeScreen.height *0.45) : sizeScreen.height - (sizeScreen.height *0.07));
    });

    _controller = AnimationController(
        value: 12, vsync: this, duration: Duration(seconds: 5));
    _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(seconds: 5),
          curve: Curves.fastLinearToSlowEaseIn,
          top: _topLanguage,
          left: _leftLanguage,
          right: _rightLanguage,
          bottom: _bottomLanguage,
          child: ListView(
            children: [
              if(minimized) ... [
                for(var language in languagesEnable!.where((element) => element.toUpperCase() != selectedLanguage ))
                  InkWell(
                    onTap: () {
                      setState(() {
                        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: kIsWeb ? sizeScreen.height *0.015 : sizeScreen.width *0.07,
                        decoration: flagDecoration(language),
                      ),
                    ),
                  )
              ]
            ],
          ),
        ),
      ],
    );
  }

  minimizedAnimation(Size size) {
    minimized = !minimized;
    print(_controller);
    if (minimized) {
      _controller!.animateBack(15.0);
    } else {
      _controller!.animateBack(0.0);
    }
    setState(() {
      _leftLanguage = kIsWeb ? size.width - (size.width *0.07) : size.width - (size.width *0.07); //size.width - size.width *0.07;
      _topLanguage = kIsWeb ? sizeScreen.height * 0.06 : sizeScreen.height * 0.07;
      _rightLanguage = 0;
      _bottomLanguage = minimized ? (kIsWeb ? size.height*0.2 : size.height*0.6) : (kIsWeb ? size.height - (size.height *0.07) : 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: DecorationImage(
        fit: BoxFit.contain,
        image: Svg(
          "assets/images/"+language.toLowerCase()+".svg",
        ), //AssetImage("assets/images/"+language+".png"),
      ),
      boxShadow: [
        BoxShadow(
          color: kSecondGrey,
          spreadRadius: 0.5,
          blurRadius: 5,
          offset: Offset(0, 1.5), // changes position of shadow
        ),
      ],
    );
  }
}