import 'dart:convert';
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:manager_api/api.dart';
import 'package:provider/provider.dart';
import 'package:tablet_app/Models/map-marker.dart';
import 'package:tablet_app/Screens/Map/map_context.dart';
import 'package:tablet_app/Screens/Map/map_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 MenuViewWidget extends StatefulWidget {
  final SectionDTO? section;
  MenuViewWidget({this.section});

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

class _MenuViewWidget extends State<MenuViewWidget> {
  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 = VideoViewWidget(section: selectedSection);
          break;
        case SectionType.slider : // Slider:
          elementToShow = SliderViewWidget(section: selectedSection);
          break;
        default:
          elementToShow = Text('Hellow default');
          break;
      }
      return Stack(
        children: [
          Center(
            child: Container(
              width: size.width,
              height: size.height * 0.8,
              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: 20, right: 20),
            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: 1.4),
            itemCount: menuDTO.sections!.length,
            itemBuilder: (BuildContext context, int index) {
              return InkWell(
                onTap: () {
                  setState(() {
                    selectedSection = menuDTO.sections![index];
                  });
                },
                child: Container(
                  decoration: boxDecoration(menuDTO.sections![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(
                                menuDTO.sections![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(
                                menuDTO.sections![index].description!.firstWhere((translation) => translation.language == appContext.getContext().language).value!,
                                style: new TextStyle(fontSize: kIsWeb? kWebSectionDescriptionDetailSize: kSectionDescriptionDetailSize, fontFamily: ""),
                                maxLines: 1,
                              ),
                            ),
                          ],
                        )
                    ),
                  ),
                ),
              );
            }
        ),
      );
    }
  }
}

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.contain,
      colorFilter: !isSelected? new ColorFilter.mode(Colors.black.withOpacity(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
      ),
    ],
  );
}