import 'package:flutter/material.dart';
import 'package:flutter_svg_provider/flutter_svg_provider.dart';
import 'package:mymuseum_visitapp/Models/visitContext.dart';
import 'package:mymuseum_visitapp/app_context.dart';
import 'package:mymuseum_visitapp/constants.dart';
import 'package:provider/provider.dart';
import '../Helpers/DatabaseHelper.dart';

class LanguageSelection extends StatefulWidget {
  const LanguageSelection();

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

class _LanguageSelection extends State<LanguageSelection> with TickerProviderStateMixin {
  List<String>? languagesEnable;
  double flagSize = 60;

  String? selectedLanguage;
  double? elementMinimizedSize;

  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    Size size = MediaQuery.of(context).size;
    VisitAppContext visitAppContext = appContext.getContext();
    var configurationLanguages = visitAppContext.configuration?.languages;
    //print(configurationLanguages);
    languagesEnable = configurationLanguages ?? languages;
    selectedLanguage = visitAppContext.language;

    if(visitAppContext.configuration != null && visitAppContext.configuration!.isOffline!) {
      languagesEnable = [configurationLanguages!.firstWhere((element) => element == visitAppContext.language)];
    }

    if(!languagesEnable!.any((lg) => lg == selectedLanguage)) {
      selectedLanguage = defaultLanguage;
    }

    return PopupMenuButton(
        icon: Container(
          height: size.height *0.07,
          width: size.width *0.07,
          decoration: flagDecoration(selectedLanguage!),
        ),
        itemBuilder: (context){
          int i = 0;
          List<PopupMenuItem> menuItems = [];
          for(var language in languagesEnable!) {
            menuItems.add(PopupMenuItem<int>(
              value: i,
              child: Center(
                child: Container(
                  width: size.width *0.07,
                  height: size.width *0.07,
                  decoration: flagDecoration(language),
                )
              ),
            ));
            i = i+1;
          }
          return menuItems;
        },
        onSelected:(value) async {
          VisitAppContext visitAppContext = appContext.getContext();
          String chosenLanguage = languagesEnable![int.parse(value.toString())];

          if(visitAppContext.language != chosenLanguage) {
            // Update App context + update local DB
            visitAppContext.language = languagesEnable![int.parse(value.toString())];
            appContext.setContext(visitAppContext);

            // Update local DB
            await DatabaseHelper.instance.insert(DatabaseTableType.main, visitAppContext.toMap());
          }
        }
    );
  }

  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: const [
        BoxShadow(
          color: kSecondGrey,
          spreadRadius: 0.5,
          blurRadius: 5,
          offset: Offset(0, 1.5), // changes position of shadow
        ),
      ],
    );
  }
}