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/MainView/dropDown_configuration.dart';
import 'package:tablet_app/Components/Map/map_context.dart';
import 'package:tablet_app/Components/Map/map_view.dart';
import 'package:tablet_app/Components/loading.dart';
import 'package:tablet_app/Components/webView.dart';
import 'package:tablet_app/Models/map-marker.dart';
import 'package:tablet_app/Models/section.dart';
import 'package:tablet_app/Models/tabletContext.dart';
import 'package:tablet_app/app_context.dart';
import 'package:tablet_app/constants.dart';
import 'package:http/http.dart' as http;
import 'package:auto_size_text/auto_size_text.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;

  @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() /*FutureBuilder(
                                      future: _url,
                                      builder: (BuildContext context, AsyncSnapshot snapshot) => snapshot.hasData
                                          ? WebViewWidget(url: snapshot.data,)
                                          : CircularProgressIndicator()),*/
          );
          break;
        case SectionType.web : // WEB
          elementToShow = WebViewWidget(url: 'Test');
          break;
        case SectionType.slider :
          elementToShow = Padding(
              padding: const EdgeInsets.all(15.0),
              child: Text('Hellow in')
          );
          break;
        default:
          elementToShow = Text('Hellow default');
          break;
      }
      return Scaffold(
        body: 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),
                      ),
                    ),
                  ),
                  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: const EdgeInsets.only(left: 15.0, right: 15.0, top: 15.0),
              child: Container(
                width: size.width,
                height: size.height * 0.85,
                decoration: 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
                    ),
                  ],
                ),
                child: Padding(
                  padding: const EdgeInsets.all(0.0),
                  child: elementToShow),
              ),
            )
          ],
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: Container(
          height: 130.0,
          width: 130.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) {
                          print('helloo test');
                          if (snapshot.connectionState == ConnectionState.done) {
                            if (snapshot.data == null) {
                              //return Text("NO CONFIGURATION");
                              return FutureBuilder(
                                  future: getConfigurations(appContext),
                                  builder: (context, AsyncSnapshot<dynamic> snapshot) {
                                    if (snapshot.connectionState == ConnectionState.done) {
                                      return Center(
                                        child: Container(
                                          decoration: BoxDecoration(
                                            borderRadius: BorderRadius.circular(29),
                                            color: kBackgroundLight,
                                          ),
                                          height: size.height*0.3,
                                          width: size.width*0.3,
                                          child: Column(
                                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                            crossAxisAlignment: CrossAxisAlignment.center,
                                            children: [
                                              Padding(
                                                padding: const EdgeInsets.all(15.0),
                                                child: Text(
                                                  "Choisir une configuration",
                                                  style: new TextStyle(
                                                    fontSize: 25
                                                  ),
                                                ),
                                              ),
                                              DropDownConfig(
                                                configurations: snapshot.data,
                                                onChange: (ConfigurationDTO configurationOut) {
                                                  setState(() {
                                                    // TODO STORE IT LOCALLY !!

                                                    TabletAppContext tabletAppContext = appContext.getContext();
                                                    tabletAppContext.configuration = configurationOut;
                                                    appContext.setContext(tabletAppContext);
                                                  });
                                                },
                                              ),
                                            ],
                                          ),
                                        ),
                                      );
                                    } else if (snapshot.connectionState == ConnectionState.none) {
                                      return Text("No data");
                                    } else {
                                      return Center(
                                          child: Container(
                                              height: size.height * 0.2,
                                              child: Loading()
                                          )
                                      );
                                    }
                                  }
                              );
                            }
                            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]),
                                          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(tabletAppContext.toString());
    List<SectionDTO> sections = await tabletAppContext.clientAPI.sectionApi.sectionGetFromConfiguration(tabletAppContext.configuration.id);
    print(sections);
    return sections;
    /*print('in future');
    final response = await http.get('https://jsonplaceholder.typicode.com/posts/1');

    if (response.statusCode == 200) {
      // If the call to the server was successful, parse the JSON.
      return [
        new Section(id: 0, title: "TEST Map", description: "Ceci est l'essai d'une carte", image: "https://www.novo-monde.com/app/uploads/2017/11/novo-map-banner-3.jpg", category: 0),
        new Section(id: 0, title: "TEST Site web", description: "Ceci est l'essai d'un site web", image: "https://static.wixstatic.com/media/38e2f4_4c1714f38942446e99c1e736726e4465~mv2.jpg/v1/fill/w_892,h_564,al_c,q_85,usm_0.66_1.00_0.01/38e2f4_4c1714f38942446e99c1e736726e4465~mv2.webp", category: 1),
        new Section(id: 0, title: "TEST 2", description: "fsfsdf", image: "https://static.wixstatic.com/media/38e2f4_4c1714f38942446e99c1e736726e4465~mv2.jpg/v1/fill/w_892,h_564,al_c,q_85,usm_0.66_1.00_0.01/38e2f4_4c1714f38942446e99c1e736726e4465~mv2.webp", category: 2),
        new Section(id: 0, title: "TEST 3", description: "fsfsdf", image: "https://static.wixstatic.com/media/38e2f4_4c1714f38942446e99c1e736726e4465~mv2.jpg/v1/fill/w_892,h_564,al_c,q_85,usm_0.66_1.00_0.01/38e2f4_4c1714f38942446e99c1e736726e4465~mv2.webp", category: 0),
        new Section(id: 0, title: "TEST 4", description: "fsfsdf", image: "https://static.wixstatic.com/media/38e2f4_4c1714f38942446e99c1e736726e4465~mv2.jpg/v1/fill/w_892,h_564,al_c,q_85,usm_0.66_1.00_0.01/38e2f4_4c1714f38942446e99c1e736726e4465~mv2.webp", category: 0),
        new Section(id: 0, title: "TEST 5", description: "fsfsdf", image: "https://static.wixstatic.com/media/38e2f4_4c1714f38942446e99c1e736726e4465~mv2.jpg/v1/fill/w_892,h_564,al_c,q_85,usm_0.66_1.00_0.01/38e2f4_4c1714f38942446e99c1e736726e4465~mv2.webp", category: 0),
        new Section(id: 0, title: "TEST 6", description: "fsfsdf", image: "https://static.wixstatic.com/media/38e2f4_4c1714f38942446e99c1e736726e4465~mv2.jpg/v1/fill/w_892,h_564,al_c,q_85,usm_0.66_1.00_0.01/38e2f4_4c1714f38942446e99c1e736726e4465~mv2.webp", category: 0),
      ];
    } else {
      // If that call was not successful, throw an error.
      throw Exception('Failed to load post');
    }*/

  }
}

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

Future<List<ConfigurationDTO>> getConfigurations(dynamic appContext) async {
  List<ConfigurationDTO> configurations = await appContext.getContext().clientAPI.configurationApi.configurationGet();
  print("number of configurations " + configurations.length.toString());
  configurations.forEach((element) {
    print(element);
  });
  return configurations;
}