import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:managerapi/api.dart';
import 'package:provider/provider.dart';
import 'package:tablet_app/Components/loading.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 'dart:io';

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;

  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    SystemChrome.setEnabledSystemUIOverlays([]);
    Size size = MediaQuery.of(context).size;

    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 = WebViewWidget(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;
        default:
          elementToShow = Text('Hellow default');
          break;
      }
      return Scaffold(
        body: SingleChildScrollView(
          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: 25),
                                maxLines: 1,
                              ),
                            )
                          ),
                          Expanded(
                            child: Align(
                              alignment: Alignment.centerLeft,
                              child: AutoSizeText(
                                sectionSelected.description.firstWhere((translation) => translation.language == appContext.getContext().language).value,
                                style: new TextStyle(fontSize: 20),
                                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: Container(
          height: 150.0,
          width: 150.0,
          child: FittedBox(
            child: FloatingActionButton.extended(
              onPressed: () {
                setState(() {
                  sectionSelected = null;
                });
              },
              icon: Icon(Icons.arrow_back),
              label: Text("Menu")
            ),
          ),
        ),
      );
    } else {
      return Scaffold(
          body: Container(
            height: size.height,
            width: size.width,
            color: kBackgroundGrey,
            child: Stack(
              children: [
                LanguageSelection(),
                Center(
                  child: Container(
                    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) {
                              return Text("ERROR");
                            }
                            else {
                              return GridView.builder(
                                  shrinkWrap: true,
                                  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
                                  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.4,
                                                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: 25),
                                                        maxLines: 1,
                                                      ),
                                                    ),
                                                    Align(
                                                      alignment: Alignment.centerRight,
                                                      child: AutoSizeText(
                                                        snapshot.data[index].description.firstWhere((translation) => translation.language == appContext.getContext().language).value,
                                                        style: new TextStyle(fontSize: 18, fontFamily: ""),
                                                        maxLines: 1,
                                                      ),
                                                    ),
                                                  ],
                                                )
                                            ),
                                          ),
                                        ),
                                      );
                                  }
                              );
                            }
                          } else if (snapshot.connectionState == ConnectionState.none) {
                            return Text("No data");
                          } else {
                            return Center(
                                child: Container(
                                    child: Loading()
                                )
                            );
                          }
                        }
                    ),
                  ),
                ),
            ]),
          )
      );
    }
  }

  Future<List<SectionDTO>> getSections(dynamic appContext) async {
    TabletAppContext tabletAppContext = await appContext.getContext();
    print("GET SECTIONS");
    print(tabletAppContext.toString());
    List<SectionDTO> sections = await tabletAppContext.clientAPI.sectionApi.sectionGetFromConfiguration(tabletAppContext.configuration.id);
    sections.sort((a, b) => a.order.compareTo(b.order));
    return sections;
  }
}

boxDecoration(SectionDTO section, bool isSelected) {
  return BoxDecoration(
    color: kBackgroundLight,
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(30.0),
    image: section.imageSource != null ? new DecorationImage(
      fit: BoxFit.cover,
      colorFilter: !isSelected? new ColorFilter.mode(Colors.black.withOpacity(0.35), 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
      ),
    ],
  );
}