import 'dart:convert';
import 'package:auto_size_text/auto_size_text.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:manager_api/api.dart';
import 'package:provider/provider.dart';
import 'package:tablet_app/Helpers/ImageCustomProvider.dart';
import 'package:tablet_app/Models/map-marker.dart';
import 'package:tablet_app/Models/tabletContext.dart';
import 'package:tablet_app/Screens/Agenda/agenda_view.dart';
import 'package:tablet_app/Screens/Map/map_context.dart';
import 'package:tablet_app/Screens/Map/map_view.dart';
import 'package:tablet_app/Screens/PDF/pdf_view.dart';
import 'package:tablet_app/Screens/Puzzle/puzzle_view.dart';
import 'package:tablet_app/Screens/Quizz/quizz_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';

class MenuView extends StatefulWidget {
  final SectionDTO? section;
  MenuView({this.section});

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

class _MenuView extends State<MenuView> {
  MenuDTO menuDTO = MenuDTO();
  SectionDTO? selectedSection;
  @override
  void initState() {
    print(widget.section!.data);
    menuDTO = MenuDTO.fromJson(jsonDecode(widget.section!.data!))!;
    print(menuDTO);

    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

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

    if (selectedSection != null) {
      var elementToShow;
      switch (selectedSection!.type) {
        case SectionType.map :
          elementToShow = ChangeNotifierProvider<MapContext>(
              create: (_) =>
                  MapContext(new MapMarker(
                      latitude: null,
                      longitude: null,
                      title: '',
                      description: '')),
              child: MapViewWidget(section: selectedSection) /*FutureBuilder(
                                      future: _url,
                                      builder: (BuildContext context, AsyncSnapshot snapshot) => snapshot.hasData
                                          ? WebViewWidget(url: snapshot.data,)
                                          : CircularProgressIndicator()),*/
          );
          break;
        case SectionType.web : // WEB
          elementToShow = WebView(section: selectedSection);
          break;
        case SectionType.video : // Video
          elementToShow = VideoView(section: selectedSection);
          break;
        case SectionType.slider : // Slider
          elementToShow = SliderView(section: selectedSection);
          break;
        case SectionType.quizz : // Quizz
          elementToShow = QuizzView(section: selectedSection);
          break;
        case SectionType.pdf : // Pdf
          elementToShow = PDFViewWidget(section: selectedSection);
          break;
        case SectionType.puzzle : // Puzzle
          elementToShow = PuzzleView(section: selectedSection);
          break;
        case SectionType.agenda : // Agenda
          elementToShow = AgendaView(section: selectedSection);
          break;
        /*case SectionType.article : // Article
          elementToShow = ArticleView(section: selectedSection);
          break;*/
        default:
          elementToShow = Text('Section type not supported');
          break;
      }
      return Stack(
        children: [
          Center(
            child: Padding(
              padding: selectedSection!.type == SectionType.video || selectedSection!.type == SectionType.web ? EdgeInsets.all(8.0) : EdgeInsets.all(0.0),
              child: Container(
                width: size.width,
                decoration: selectedSection!.type != SectionType.video && selectedSection!.type != SectionType.web && selectedSection!.type != SectionType.slider && selectedSection!.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.only(left: 15.0, right: 15.0),
                    child: elementToShow),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 5, right: 5),
            child: Align(
                alignment: Alignment.bottomRight,
                child: InkWell(
                  onTap: () {
                    setState(() {
                      selectedSection = null;
                    });
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      color: appContext.getContext().configuration == null ? kBackgroundGrey : appContext.getContext().configuration.secondaryColor != null ? new Color(int.parse(appContext.getContext().configuration.secondaryColor.split('(0x')[1].split(')')[0], radix: 16)): kBackgroundGrey,
                      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: Icon(
                      Icons.arrow_back,
                      size: 95,
                      color: kMainGrey,
                    ),
                  ),
                )
            ),
          ),
        ],
      );
    } else {
      return Center(
        child: GridView.builder(
            shrinkWrap: true,
            gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: kIsWeb ? 1.7 : 1.4),
            itemCount: menuDTO.sections!.length,
            itemBuilder: (BuildContext context, int index) {
              return InkWell(
                onTap: () async {
                  SectionDTO? section = await (appContext.getContext() as TabletAppContext).clientAPI!.sectionApi!.sectionGetDetail(menuDTO.sections![index].id!);
                  setState(() {
                    selectedSection = section;
                    //selectedSection = menuDTO.sections![index];
                  });
                },
                child: Container(
                  decoration: boxDecoration(appContext, menuDTO.sections![index], false),
                  padding: const EdgeInsets.all(25),
                  margin: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
                  child: Align(
                    alignment: Alignment.bottomRight,
                    child: FractionallySizedBox(
                        heightFactor: 0.45,
                        child: Column(
                          children: [
                            Align(
                              alignment: Alignment.centerRight,
                              child: HtmlWidget(
                                menuDTO.sections![index].title!.firstWhere((translation) => translation.language == appContext.getContext().language).value!,
                                customStylesBuilder: (element) {
                                  return {'text-align': 'right'};
                                },
                                textStyle: new TextStyle(fontSize: kIsWeb? kWebMenuTitleDetailSize : kMenuTitleDetailSize),
                              ),
                            ),
                            Align(
                              alignment: Alignment.centerRight,
                              child: HtmlWidget(
                                menuDTO.sections![index].description!.firstWhere((translation) => translation.language == appContext.getContext().language).value!,
                                customStylesBuilder: (element) {
                                  return {'text-align': 'right'};
                                },
                                textStyle: new TextStyle(fontSize: kIsWeb? kWebSectionDescriptionDetailSize: kSectionDescriptionDetailSize, fontFamily: ""),
                              ),
                            ),
                          ],
                        )
                    ),
                  ),
                ),
              );
            }
        ),
      );
    }
  }
}

boxDecoration(AppContext appContext, 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(kBackgroundLight.withOpacity(0.2), BlendMode.dstATop) : null,
      image: ImageCustomProvider.getImageProvider(appContext, section.imageId!, section.imageSource!),
    ): null,
    boxShadow: [
      BoxShadow(
        color: kBackgroundSecondGrey,
        spreadRadius: 0.5,
        blurRadius: 5,
        offset: Offset(0, 1.5), // changes position of shadow
      ),
    ],
  );
}