import 'package:cached_network_image/cached_network_image.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.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:mymuseum_visitapp/Components/show_element_for_resource.dart';
import 'package:mymuseum_visitapp/Helpers/ImageCustomProvider.dart';
import 'package:mymuseum_visitapp/Models/visitContext.dart';
import 'package:mymuseum_visitapp/app_context.dart';
import 'package:mymuseum_visitapp/constants.dart';
import 'package:provider/provider.dart';
import 'package:photo_view/photo_view.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';

class SliderPage extends StatefulWidget {
  final SliderDTO section;
  SliderPage({required this.section});

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

class _SliderPage extends State<SliderPage> {
  SliderDTO sliderDTO = SliderDTO();
  CarouselSliderController? sliderController;
  ValueNotifier<int> currentIndex = ValueNotifier<int>(1);

  late ConfigurationDTO configurationDTO;

  @override
  void initState() {
    sliderController = CarouselSliderController();
    sliderDTO = widget.section;
    sliderDTO.contents!.sort((a, b) => a.order!.compareTo(b.order!));

    super.initState();
  }

  @override
  void dispose() {
    sliderController = null;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    final appContext = Provider.of<AppContext>(context);
    VisitAppContext visitAppContext = appContext.getContext() as VisitAppContext;
    Color? primaryColor = visitAppContext.configuration!.primaryColor != null ? Color(int.parse(visitAppContext.configuration!.primaryColor!.split('(0x')[1].split(')')[0], radix: 16)) : null;

    configurationDTO = appContext.getContext().configuration;

    return Stack(
        children: [
          Container(
            height: size.height,
            width: size.width,
            color: kBackgroundLight,
          ),
          if(sliderDTO.contents != null && sliderDTO.contents!.isNotEmpty)
            Center(
              child: CarouselSlider(
                carouselController: sliderController,
                options: CarouselOptions(
                  onPageChanged: (int index, CarouselPageChangedReason reason) {
                    currentIndex.value = index + 1;
                  },
                  enableInfiniteScroll: false,
                  height: MediaQuery.of(context).size.height * 0.92,
                  enlargeCenterPage: false,
                  reverse: false,
                ),
                items: sliderDTO.contents!.map<Widget>((i) {
                  return Builder(
                    builder: (BuildContext context) {
                      return Container(
                          width: MediaQuery.of(context).size.width,
                          height: MediaQuery.of(context).size.height,
                          margin: const EdgeInsets.symmetric(horizontal: 5.0),
                          decoration: BoxDecoration(
                            color: kBackgroundGrey,
                            //color: configurationDTO.imageId == null ? configurationDTO.secondaryColor != null ? new Color(int.parse(configurationDTO.secondaryColor!.split('(0x')[1].split(')')[0], radix: 16)): kBackgroundGrey : null,
                            borderRadius: BorderRadius.circular(visitAppContext.configuration!.roundedValue?.toDouble() ?? 10.0),
                            //border: Border.all(width: 0.3, color: kSecondGrey),
                          ),
                          child: Column(
                            //crossAxisAlignment: CrossAxisAlignment.center,
                            //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              Padding(
                                padding: const EdgeInsets.all(10.0),
                                child: Container(
                                  //color: Colors.orange,
                                  height: MediaQuery.of(context).size.height * 0.6,
                                  width: MediaQuery.of(context).size.width * 0.72,
                                  /*decoration: BoxDecoration(
                                    color: kBackgroundLight,
                                    shape: BoxShape.rectangle,
                                    borderRadius: BorderRadius.circular(20.0),
                                    /*image: i.source_ != null ? new DecorationImage(
                                      fit: BoxFit.cover,
                                      image: new NetworkImage(
                                        i.source_,
                                      ),
                                    ): null,*/
                                    boxShadow: [
                                      BoxShadow(
                                        color: kBackgroundSecondGrey,
                                        spreadRadius: 0.5,
                                        blurRadius: 5,
                                        offset: Offset(0, 1.5), // changes position of shadow
                                      ),
                                    ],
                                  ),*/
                                  child: Stack(
                                    children: [
                                      getElementForResource(appContext, i),
                                      Positioned(
                                          bottom: 0,
                                          right: 0,
                                          child: Padding(
                                            padding: const EdgeInsets.all(15.0),
                                            child: HtmlWidget(
                                              i.title!.where((translation) => translation.language == appContext.getContext().language).firstOrNull?.value != null ? i.title!.firstWhere((translation) => translation.language == appContext.getContext().language).value! : "",
                                              textStyle: const TextStyle(fontSize: kTitleSize, color: kBackgroundLight),
                                            ),
                                          )
                                      )
                                    ]
                                  ),/**/
                                ),
                              ),
                              Expanded(
                                child: Padding(
                                  padding: const EdgeInsets.only(bottom: 10),
                                  child: Container(
                                    height: MediaQuery.of(context).size.height *0.25,
                                    width: MediaQuery.of(context).size.width *0.7,
                                    decoration: BoxDecoration(
                                      color: kBackgroundLight,// kBackgroundLight,
                                      shape: BoxShape.rectangle,
                                      borderRadius: BorderRadius.circular(visitAppContext.configuration!.roundedValue?.toDouble() ?? 10.0),
                                      boxShadow: const [
                                        BoxShadow(
                                          color: kBackgroundSecondGrey,
                                          spreadRadius: 0.3,
                                          blurRadius: 4,
                                          offset: Offset(0, 2), // changes position of shadow
                                        ),
                                      ],
                                    ),
                                    child: SingleChildScrollView(
                                      child: Padding(
                                        padding: const EdgeInsets.all(15.0),
                                        child: HtmlWidget(
                                          i.description!.where((translation) => translation.language == appContext.getContext().language).firstOrNull?.value != null ? i.description!.firstWhere((translation) => translation.language == appContext.getContext().language).value! : "",
                                          textStyle: const TextStyle(fontSize: kDescriptionSize),
                                          customStylesBuilder: (element) {
                                            return {'text-align': 'center', 'font-family': "Roboto"};
                                          },
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          )
                      );
                    },
                  );
                }).toList(),
              ),
            ),
          /*if(sliderDTO.contents != null && sliderDTO.contents!.length > 1)
            Positioned(
              top: MediaQuery.of(context).size.height * 0.35,
              right: 60,
              child: InkWell(
                onTap: () {
                  if (sliderDTO.contents!.length > 0)
                    sliderController!.nextPage(duration: new Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                },
                child: Icon(
                  Icons.chevron_right,
                  size: 90,
                  color: primaryColor ?? kMainColor,
                ),
              )
          ),*/
          /*if(sliderDTO.contents != null && sliderDTO.contents!.length > 1)
            Positioned(
              top: MediaQuery.of(context).size.height * 0.35,
              left: 60,
              child: InkWell(
                onTap: () {
                  if (sliderDTO.contents!.length > 0)
                    sliderController!.previousPage(duration: new Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                },
                child: Icon(
                  Icons.chevron_left,
                  size: 90,
                  color: primaryColor ?? kMainColor,
                ),
              )
          ),*/
          if(sliderDTO.contents != null && sliderDTO.contents!.isNotEmpty) // Todo replace by dot ?
            Padding(
              padding: widget.section.parentId == null ? const EdgeInsets.only(bottom: 20) : const EdgeInsets.only(left: 15, bottom: 20),
              child: Align(
                  alignment: widget.section.parentId == null ? Alignment.bottomCenter : Alignment.bottomLeft,
                  child: InkWell(
                    onTap: () {
                      sliderController!.previousPage(duration: const Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                    },
                    child: ValueListenableBuilder<int>(
                        valueListenable: currentIndex,
                        builder: (context, value, _) {
                        return AnimatedSmoothIndicator(
                          activeIndex: value -1,
                          count: sliderDTO.contents!.length,
                          effect: ExpandingDotsEffect(activeDotColor: primaryColor!),
                        );

                          /*Text(
                          value.toString()+'/'+sliderDTO.contents!.length.toString(),
                          style: const TextStyle(fontSize: 25, fontWeight: FontWeight.w500),
                        );*/
                      }
                    ),
                  )
              ),
            ),
          if(sliderDTO.contents == null || sliderDTO.contents!.isEmpty)
              const Center(child: Text("Aucun contenu à afficher", style: TextStyle(fontSize: kNoneInfoOrIncorrect))),
          Positioned(
            top: 35,
            left: 10,
            child: SizedBox(
                width: 50,
                height: 50,
                child: InkWell(
                  onTap: () {
                    Navigator.of(context).pop();
                  },
                  child: Container(
                      decoration: const BoxDecoration(
                        color: kMainColor,
                        shape: BoxShape.circle,
                      ),
                      child: const Icon(Icons.arrow_back, size: 23, color: Colors.white)
                  ),
                )
            ),
          ),
          // Description
          /*Container(
            height: sliderDTO.images != null && sliderDTO.images.length > 0 ? size.height *0.3 : size.height *0.6,
            width: MediaQuery.of(context).size.width *0.35,
            decoration: BoxDecoration(
              color: kBackgroundLight,
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(10.0),
              boxShadow: [
                BoxShadow(
                  color: kBackgroundSecondGrey,
                  spreadRadius: 0.5,
                  blurRadius: 1.1,
                  offset: Offset(0, 1.1), // changes position of shadow
                ),
              ],
            ),
            child: SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: Text(sliderDTO., textAlign: TextAlign.center, style: TextStyle(fontSize: 15)),
              ),
            ),
          ),*/
        ]
    );
  }

  getElementForResource(AppContext appContext, ContentDTO i) {
    var widgetToInclude;
    VisitAppContext visitAppContext = appContext.getContext() as VisitAppContext;

    switch(i.resource!.type) {
      case ResourceType.Image:
        widgetToInclude = PhotoView(
          imageProvider: ImageCustomProvider.getImageProvider(appContext, i.resourceId!, i.resource!.url!),
          minScale: PhotoViewComputedScale.contained * 0.8,
          maxScale: PhotoViewComputedScale.contained * 3.0,
          backgroundDecoration: BoxDecoration(
            color: kBackgroundLight,
            shape: BoxShape.rectangle,
            boxShadow: const [
              BoxShadow(
                color: kBackgroundGrey,
                spreadRadius: 0.3,
                blurRadius: 4,
                offset: Offset(0, 2), // changes position of shadow
              ),
            ],
            borderRadius: BorderRadius.circular(visitAppContext.configuration!.roundedValue?.toDouble() ?? 15.0),
          ),
        );
        break;
      case ResourceType.ImageUrl:
        widgetToInclude = PhotoView(
          imageProvider: CachedNetworkImageProvider(i.resource!.url!),
          minScale: PhotoViewComputedScale.contained * 0.8,
          maxScale: PhotoViewComputedScale.contained * 3.0,
          backgroundDecoration: BoxDecoration(
            color: kBackgroundLight,
            shape: BoxShape.rectangle,
            boxShadow: const [
              BoxShadow(
                color: kBackgroundGrey,
                spreadRadius: 0.3,
                blurRadius: 4,
                offset: Offset(0, 2), // changes position of shadow
              ),
            ],
            borderRadius: BorderRadius.circular(visitAppContext.configuration!.roundedValue?.toDouble() ?? 15.0),
          ),
        );
        break;
      case ResourceType.Video:
      case ResourceType.VideoUrl:
      case ResourceType.Audio:
        widgetToInclude = Container(
          decoration: BoxDecoration(
            color: kBackgroundLight,
            //shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(visitAppContext.configuration!.roundedValue?.toDouble() ?? 15.0),
          ),
          child: showElementForResource(ResourceDTO(id: i.resourceId, url: i.resource!.url, type: i.resource!.type), appContext, false, true),
        );
        break;
    }

    return Center(
      child: Container(
        height: MediaQuery.of(context).size.height * 0.6,
        width: MediaQuery.of(context).size.width * 0.72,
        child: AspectRatio(
          aspectRatio: 16 / 9,
          child: ClipRect(
            child: widgetToInclude,
          ),
        ),
      ),
    );
  }
}