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/Components/loading_common.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/MainView/main_view.dart';
import 'package:tablet_app/Screens/MainView/section_page_detail.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;
  final bool isImageBackground;
  MenuView({required this.section, required this.isImageBackground});

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

class _MenuView extends State<MenuView> {
  MenuDTO menuDTO = MenuDTO();
  SectionDTO? selectedSection;
  bool isImageBackground = false;

  @override
  void initState() {
    print(widget.section.data);
    menuDTO = MenuDTO.fromJson(jsonDecode(widget.section.data!))!;
    print(menuDTO);

    isImageBackground = widget.isImageBackground;

    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    Size size = MediaQuery.of(context).size;
    TabletAppContext tabletAppContext = appContext.getContext() as TabletAppContext;
    ConfigurationDTO configurationDTO = appContext.getContext().configuration;
    Color backgroundColor = appContext.getContext().configuration != null ? new Color(int.parse(appContext.getContext().configuration.secondaryColor.split('(0x')[1].split(')')[0], radix: 16)) : Colors.white;
    Color textColor = backgroundColor.computeLuminance() > 0.5 ? Colors.black : Colors.white;

    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];
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) {
                        return SectionPageDetail(configurationDTO: configurationDTO, sectionDTO: section!, textColor: textColor, isImageBackground: isImageBackground, elementToShow: getContent(tabletAppContext, section, isImageBackground), isFromMenu: true);
                      },
                    ),// For pushAndRemoveUntil
                  );
                });
              },
              child: Container(
                decoration: isImageBackground ? boxDecoration(appContext, menuDTO.sections![index], false) : null,
                padding: const EdgeInsets.all(25),
                margin: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
                child: isImageBackground ? Align(
                  alignment: Alignment.bottomRight,
                  child: FractionallySizedBox(
                      heightFactor: 0.5,
                      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: ""),
                            ),
                          ),*/
                        ],
                      )
                  ),
                ) : Column(
                  children: [
                  Expanded(
                  flex: 8,
                      child: Container(
                        decoration: BoxDecoration(
                          color: menuDTO.sections![index].imageSource == null ? kBackgroundColor : null, // default color if no image
                          shape: BoxShape.rectangle,
                          image: menuDTO.sections![index].imageSource != null ? new DecorationImage(
                            fit: BoxFit.cover,
                            image: ImageCustomProvider.getImageProvider(appContext, menuDTO.sections![index].imageId!, menuDTO.sections![index].imageSource!),
                          ): null,
                        ),
                      )
                  ),
                  Expanded(
                      flex: 2,
                      child: Center(
                        child: HtmlWidget(
                          menuDTO.sections![index].title!.firstWhere((translation) => translation.language == appContext.getContext().language).value ?? "",
                          customStylesBuilder: (element) {
                            return {'text-align': 'center', 'font-family': "Roboto"};
                          },
                          textStyle: TextStyle(fontSize: 25),//calculateFontSize(constraints.maxWidth, constraints.maxHeight, kIsWeb ? kWebMenuTitleDetailSize : kMenuTitleDetailSize)),
                        ),
                      )
                  )
                  ],
                ),
              ),
            );
          }
      ),
    );
  }
}

boxDecoration(AppContext appContext, SectionDTO section, bool isSelected) {
  TabletAppContext tabletAppContext = appContext.getContext() as TabletAppContext;

  return BoxDecoration(
    color: kBackgroundLight,
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(tabletAppContext.configuration!.roundedValue?.toDouble() ?? 20.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.3,
        blurRadius: 5,
        offset: Offset(0, 1.5), // changes position of shadow
      ),
    ],
  );
}