import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:manager_api/api.dart';
import 'package:provider/provider.dart';
import 'package:tablet_app/Components/loading.dart';
import 'package:tablet_app/Components/loading_common.dart';
import 'package:tablet_app/Helpers/MQTTHelper.dart';
import 'package:tablet_app/Screens/Configuration/config_view.dart';
import 'package:tablet_app/Screens/Map/map_context.dart';
import 'package:tablet_app/Screens/Map/map_view.dart';
import 'package:tablet_app/Models/map-marker.dart';
import 'package:tablet_app/Models/tabletContext.dart';
import 'package:tablet_app/Screens/Menu/menu_view.dart';
import 'package:tablet_app/Screens/Slider/slider_view.dart';
import 'package:tablet_app/Screens/Video/video_view.dart';
import 'package:tablet_app/Screens/Web/web_view.dart';
import 'package:tablet_app/app_context.dart';
import 'package:tablet_app/constants.dart';
import 'package:auto_size_text/auto_size_text.dart';

import '../Quizz/quizz_view.dart';
import 'language_selection.dart';

class MainViewWidget extends StatefulWidget {
  MainViewWidget();

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

class _MainViewWidget extends State<MainViewWidget> {
  Size sizeScreen = new Size(1080.0, 1920.0); // Tablet resolution
  SectionDTO? sectionSelected;
  late ConfigurationDTO configurationDTO;

  int rowCount = 4;

  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
    Size size = MediaQuery.of(context).size;

    configurationDTO = appContext.getContext().configuration;

    if (!MQTTHelper.instance.isInstantiated)
      MQTTHelper.instance.connect(appContext);

    if(sectionSelected != null) {
      var elementToShow;
      switch (sectionSelected!.type) {
        case SectionType.map : // MAP
          elementToShow = ChangeNotifierProvider<MapContext>(
              create: (_) =>
                  MapContext(new MapMarker(
                      latitude: null,
                      longitude: null,
                      title: '',
                      description: '')),
              child: MapViewWidget(section: sectionSelected!) /*FutureBuilder(
                                      future: _url,
                                      builder: (BuildContext context, AsyncSnapshot snapshot) => snapshot.hasData
                                          ? WebViewWidget(url: snapshot.data,)
                                          : CircularProgressIndicator()),*/
          );
          break;
        case SectionType.web : // WEB
          elementToShow = WebView(section: sectionSelected);
          break;
        case SectionType.video : // Video
          elementToShow = VideoViewWidget(section: sectionSelected);
          break;
        case SectionType.slider :
          elementToShow = SliderViewWidget(section: sectionSelected);
          break;
        case SectionType.menu :
          elementToShow = MenuViewWidget(section: sectionSelected!);
          break;
        case SectionType.quizz :
          elementToShow = QuizzViewWidget(section: sectionSelected);
          break;
        default:
          elementToShow = Text("Ce type n'est pas supporté");
          break;
      }
      return Scaffold(
        body: SingleChildScrollView(
          child: Container(
            height: size.height,
            width: size.width,
            color: configurationDTO.imageId == null ? configurationDTO.secondaryColor != null ? new Color(int.parse(configurationDTO.secondaryColor!.split('(0x')[1].split(')')[0], radix: 16)): kBackgroundGrey : null,
            decoration: configurationDTO.imageId != null ? BoxDecoration(
              image: new DecorationImage(
                fit: BoxFit.cover,
                colorFilter: new ColorFilter.mode(Colors.grey.withOpacity(0.7), BlendMode.color),
                image: new NetworkImage(
                   configurationDTO.imageSource!,
                ),
              ),
            ) : null,
            child: Column(
              children: [
                Container(
                  width: size.width,
                  height: size.height * 0.12,
                  child: Row(
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(left: 15.0, top: 10.0),
                        child: AspectRatio(
                          aspectRatio: 4 / 4,
                          child: Container(
                            /*width: 125,
                            height: 125,*/
                            decoration: boxDecoration(sectionSelected!, true),
                          ),
                        ),
                      ),
                      SizedBox(
                        width: 25,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Expanded(
                              child: Align(
                                alignment: Alignment.centerLeft,
                                child: AutoSizeText(
                                  sectionSelected!.title!.firstWhere((translation) => translation.language == appContext.getContext().language).value!,
                                  style: new TextStyle(fontSize: kIsWeb ? kWebSectionTitleDetailSize : kSectionTitleDetailSize),
                                  maxLines: 1,
                                ),
                              )
                            ),
                            if(sectionSelected!.description!.firstWhere((translation) => translation.language == appContext.getContext().language).value != null && sectionSelected!.description!.firstWhere((translation) => translation.language == appContext.getContext().language).value!.trim().isNotEmpty)
                              Expanded(
                                child: Align(
                                  alignment: Alignment.centerLeft,
                                  child: AutoSizeText(
                                    sectionSelected!.description!.firstWhere((translation) => translation.language == appContext.getContext().language).value!,
                                    style: new TextStyle(fontSize: kIsWeb? kWebSectionDescriptionDetailSize : kSectionDescriptionDetailSize),
                                    maxLines: 2,
                                  ),
                                )
                              )
                          ],
                        ),
                      )
                    ],
                  ),
                ),
                Padding(
                  padding: sectionSelected!.type != SectionType.slider ? const EdgeInsets.only(left: 15.0, right: 15.0, top: 15.0) : const EdgeInsets.only(top: 15.0),
                  child: Container(
                    width: size.width,
                    height: size.height * 0.85,
                    decoration: sectionSelected!.type != SectionType.video && sectionSelected!.type != SectionType.web && sectionSelected!.type != SectionType.slider && sectionSelected!.type != SectionType.map ? BoxDecoration(
                      color: kBackgroundLight,
                      shape: BoxShape.rectangle,
                      borderRadius: BorderRadius.circular(30.0),
                      boxShadow: [
                        BoxShadow(
                          color: kBackgroundSecondGrey,
                          spreadRadius: 0.5,
                          blurRadius: 5,
                          offset: Offset(0, 1.5), // changes position of shadow
                        ),
                      ],
                    ) : null,
                    child: Padding(
                      padding: const EdgeInsets.all(0.0),
                      child: elementToShow),
                  ),
                )
              ],
            ),
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
        floatingActionButton: Padding(
          padding: const EdgeInsets.only(top: kIsWeb ? 16.0 : 0.0),
          child: Container(
            height: kIsWeb ? size.height *0.08 : 185.0,
            width: kIsWeb ? size.width *0.08: 185.0,
            child: FittedBox(
              child: FloatingActionButton.extended(
                backgroundColor: kBackgroundColor,
                focusColor: kBackgroundColor,
                splashColor: kBackgroundColor,
                onPressed: () {
                  setState(() {
                    sectionSelected = null;
                  });
                },
                icon: Icon(Icons.arrow_back, color: Colors.grey),
                label: Text("Menu")
              ),
            ),
          ),
        ),
      );
    } else {
      return Scaffold(
          body: Container(
            height: size.height,
            width: size.width,
            color: configurationDTO.imageId == null ? configurationDTO.secondaryColor != null ? new Color(int.parse(appContext.getContext().configuration.secondaryColor.split('(0x')[1].split(')')[0], radix: 16)): kBackgroundGrey : null,
            decoration: configurationDTO.imageId != null ? BoxDecoration(
              image: new DecorationImage(
                fit: BoxFit.cover,
                colorFilter: new ColorFilter.mode(Colors.grey.withOpacity(0.7), BlendMode.color),
                image: new NetworkImage(
                  configurationDTO.imageSource!,
                ),
              ),
            ) : null,
            child: Stack(
              children: [
                if (configurationDTO != null) LanguageSelection(),
                Center(
                  child: Container(
                    height: kIsWeb ? size.height : size.height * 0.85,
                    width: size.width * 0.9,
                    child: FutureBuilder(
                        future: getSections(appContext),
                        builder: (context, AsyncSnapshot<dynamic> snapshot) {
                          if (snapshot.connectionState == ConnectionState.done) {
                            if (snapshot.data == null) {
                              // Show select config
                              return Text("");
                            }
                            else {
                              return Center(
                                child: GridView.builder(
                                    shrinkWrap: true,
                                    gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: rowCount),
                                    itemCount: snapshot.data?.length,
                                    itemBuilder: (BuildContext context, int index) {
                                      return InkWell(
                                          onTap: () {
                                            setState(() {
                                              sectionSelected = snapshot.data[index];
                                            });
                                          },
                                          child: Container(
                                            decoration: boxDecoration(snapshot.data[index], false),
                                            padding: const EdgeInsets.all(25),
                                            margin: EdgeInsets.symmetric(vertical: 25, horizontal: 25),
                                            child: Align(
                                              alignment: Alignment.bottomRight,
                                              child: FractionallySizedBox(
                                                  heightFactor: 0.25,
                                                  child: Column(
                                                    children: [
                                                      Align(
                                                        alignment: Alignment.centerRight,
                                                        child: AutoSizeText(
                                                          snapshot.data[index].title.firstWhere((translation) => translation.language == appContext.getContext().language).value,
                                                          style: new TextStyle(fontSize: kIsWeb ? kWebMenuTitleDetailSize: kMenuTitleDetailSize),
                                                          maxLines: 1,
                                                        ),
                                                      ),
                                                      Align(
                                                        alignment: Alignment.centerRight,
                                                        child: AutoSizeText(
                                                          snapshot.data[index].description.firstWhere((translation) => translation.language == appContext.getContext().language).value,
                                                          style: new TextStyle(fontSize: kIsWeb ? kWebMenuDescriptionDetailSize: kMenuDescriptionDetailSize, fontFamily: ""),
                                                          maxLines: 1,
                                                        ),
                                                      ),
                                                    ],
                                                  )
                                              ),
                                            ),
                                          ),
                                        );
                                    }
                                ),
                              );
                            }
                          } else if (snapshot.connectionState == ConnectionState.none) {
                            return Text("No data");
                          } else {
                            return Center(
                                child: Container(
                                    child: LoadingCommon()
                                )
                            );
                          }
                        }
                    ),
                  ),
                ),
            ]),
          )
      );
    }
  }

  Future<List<SectionDTO>?> getSections(dynamic appContext) async {
    TabletAppContext tabletAppContext = await appContext.getContext();
    try {
      List<SectionDTO>? sections = await tabletAppContext.clientAPI!.sectionApi!.sectionGetFromConfiguration(tabletAppContext.configuration!.id!);
      sections!.sort((a, b) => a.order!.compareTo(b.order!));
      return sections;
    } catch (e) {
      print(e);
      print("IN CATCH");
      Navigator.pushAndRemoveUntil(
          context,
          MaterialPageRoute(
            builder: (context) {
              return ConfigViewWidget();
            },
          ),
              (Route<dynamic> route) => false // For pushAndRemoveUntil
      );
    }
  }
}

boxDecoration(SectionDTO section, bool isSelected) {
  return BoxDecoration(
    color: kBackgroundLight,
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(30.0),
    image: section.imageSource != null ? new DecorationImage(
      fit: !isSelected || kIsWeb ? BoxFit.cover : BoxFit.contain,
      colorFilter: !isSelected? new ColorFilter.mode(Colors.black.withOpacity(kIsWeb ? 0.3 : 0.5), BlendMode.dstATop) : null,
      image: new NetworkImage(
        section.imageSource!,
      ),
    ): null,
    boxShadow: [
      BoxShadow(
        color: kBackgroundSecondGrey,
        spreadRadius: 0.5,
        blurRadius: 5,
        offset: Offset(0, 1.5), // changes position of shadow
      ),
    ],
  );
}