tablet-app-new/lib/Screens/Menu/menu_view.dart

import 'dart:convert';
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_new/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/tabletContext.dart';
import 'package:tablet_app/Screens/MainView/main_view.dart';
import 'package:tablet_app/Screens/MainView/section_page_detail.dart';
import 'package:tablet_app/app_context.dart';
import 'package:tablet_app/constants.dart';

class MenuView extends StatefulWidget {
  final MenuDTO 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;
  late List<dynamic> rawSubSectionsData;
  late List<SectionDTO> subSections;

  @override
  void initState() {
    /*print(widget.section.data);
    menuDTO = MenuDTO.fromJson(jsonDecode(widget.section.data!))!;
    print(menuDTO);*/
    //menuDTO = widget.section;
    rawSubSectionsData = jsonDecode(jsonEncode(widget.section.sections));
    //menuDTO.sections!.sort((a, b) => a.order!.compareTo(b.order!)); // useless, we get these after that
    subSections = jsonDecode(jsonEncode(rawSubSectionsData)).map((json) => SectionDTO.fromJson(json)).whereType<SectionDTO>().toList();

    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.3),
          itemCount: subSections.length,
          itemBuilder: (BuildContext context, int index) {
            return InkWell(
              onTap: () {
                //SectionDTO? section = await (appContext.getContext() as TabletAppContext).clientAPI!.sectionApi!.sectionGetDetail(menuDTO.sections![index].id!);
                SectionDTO section = subSections[index];
                var rawSectionData = rawSubSectionsData[index];

                tabletAppContext.statisticsService?.track(
                  VisitEventType.menuItemTap,
                  metadata: {'targetSectionId': section.id, 'menuItemTitle': section.title?.where((t) => t.language == tabletAppContext.language).firstOrNull?.value},
                );

                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, rawSectionData), isFromMenu: true);
                      },
                    ),// For pushAndRemoveUntil
                  );
                });
              },
              child: Container(
                decoration: isImageBackground ? boxDecoration(appContext, subSections[index], false, rawSubSectionsData[index]) : null,
                padding: const EdgeInsets.all(20),
                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(
                              subSections[index].title!.where((translation) => translation.language == appContext.getContext().language).firstOrNull?.value ?? "",
                              customStylesBuilder: (element) {
                                return {'text-align': 'right', 'font-family': "Roboto"};
                              },
                              textStyle: new TextStyle(fontSize: 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: 7,
                      child: Container(
                        decoration: BoxDecoration(
                          color: subSections[index].imageSource == null && subSections[index].type != SectionType.Video ? kBackgroundColor : null, // default color if no image
                          shape: BoxShape.rectangle,
                          image: subSections[index].imageSource != null || subSections[index].type == SectionType.Video ? new DecorationImage(
                            fit: BoxFit.contain, // contain or cover ?
                            image: ImageCustomProvider.getImageProvider(appContext, subSections[index].imageId, subSections[index].type == SectionType.Video ? getYoutubeThumbnailUrl(rawSubSectionsData[index]) : subSections[index].imageSource!),
                          ): null,
                        ),
                      )
                  ),
                  Expanded(
                      flex: 3,
                      child: Container(
                        //color: Colors.yellow,
                        constraints: BoxConstraints(
                          maxWidth: size.width * 0.3,
                        ),
                        child: Center(
                          child: HtmlWidget(
                            subSections[index].title!.where((translation) => translation.language == appContext.getContext().language).firstOrNull?.value ?? "",
                            customStylesBuilder: (element) {
                              return {'text-align': 'center', 'font-family': "Roboto"};
                            },
                            textStyle: TextStyle(fontSize: 20),//calculateFontSize(constraints.maxWidth, constraints.maxHeight, kIsWeb ? kWebMenuTitleDetailSize : kMenuTitleDetailSize)),
                          ),
                        ),
                      )
                  )
                  ],
                ),
              ),
            );
          }
      ),
    );
  }
}

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

  return BoxDecoration(
    color: kBackgroundLight,
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(tabletAppContext.currentAppConfigurationLink?.roundedValue?.toDouble() ?? 20.0),
    image: section.imageSource != null || section.type == SectionType.Video ? new DecorationImage(
      fit: BoxFit.cover,
      colorFilter: !isSelected? new ColorFilter.mode(kBackgroundLight.withValues(alpha: 0.35), BlendMode.dstATop) : null,
      image: ImageCustomProvider.getImageProvider(appContext, section.imageId, section.type == SectionType.Video ? getYoutubeThumbnailUrl(rawSubSectionData) : section.imageSource!),
    ): null,
    boxShadow: [
      BoxShadow(
        color: kBackgroundSecondGrey,
        spreadRadius: 0.3,
        blurRadius: 5,
        offset: Offset(0, 1.5), // changes position of shadow
      ),
    ],
  );
}

String getYoutubeThumbnailUrl(Object rawSectionData) {
  try{
    VideoDTO videoDTO = VideoDTO.fromJson(rawSectionData)!;

    String thumbnailUrl = "";
    if(videoDTO.source_ != null) {
      //VideoDTO? videoDTO = VideoDTO.fromJson(jsonDecode(sectionDTO.data!));
      Uri uri = Uri.parse(videoDTO.source_!);
      String videoId = uri.queryParameters['v']!;
      // Construire l'URL du thumbnail en utilisant l'identifiant de la vidéo YouTube
      thumbnailUrl = 'https://img.youtube.com/vi/$videoId/0.jpg';
    }

    return thumbnailUrl;

  } catch(e) {
    return "";
  }
}