import 'dart:convert';
import 'dart:io';
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/api.dart';
import 'package:path_provider/path_provider.dart';
import 'package:provider/provider.dart';
import 'package:tablet_app/Components/show_element_for_resource.dart';
import 'package:tablet_app/Components/video_viewer.dart';
import 'package:tablet_app/Helpers/ImageCustomProvider.dart';
import 'package:tablet_app/Models/tabletContext.dart';
import 'package:tablet_app/app_context.dart';
import 'package:tablet_app/constants.dart';
import 'package:photo_view/photo_view.dart';

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

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

class _SliderView extends State<SliderView> {
  SliderDTO sliderDTO = SliderDTO();
  CarouselController? sliderController;
  ValueNotifier<int> currentIndex = ValueNotifier<int>(1);

  late ConfigurationDTO configurationDTO;

  @override
  void initState() {
    sliderController = CarouselController();
    sliderDTO = SliderDTO.fromJson(jsonDecode(widget.section!.data!))!;

    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);
    TabletAppContext tabletAppContext = appContext.getContext() as TabletAppContext;
    Color? primaryColor = tabletAppContext.configuration!.primaryColor != null ? new Color(int.parse(tabletAppContext.configuration!.primaryColor!.split('(0x')[1].split(')')[0], radix: 16)) : null;

    configurationDTO = appContext.getContext().configuration;

    return Stack(
        children: [
          if(sliderDTO.contents != null && sliderDTO.contents!.length > 0)
            CarouselSlider(
              carouselController: sliderController,
              options: CarouselOptions(
                onPageChanged: (int index, CarouselPageChangedReason reason) {
                  currentIndex.value = index + 1;
                },
                height: MediaQuery.of(context).size.height * 0.8,
                enlargeCenterPage: true,
                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: EdgeInsets.symmetric(horizontal: 5.0),
                        decoration: BoxDecoration(
                          //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(tabletAppContext.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(
                                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!.firstWhere((translation) => translation.language == appContext.getContext().language).value != null ? i.title!.firstWhere((translation) => translation.language == appContext.getContext().language).value! : "",
                                            textStyle: TextStyle(fontSize: kIsWeb ? kWebTitleSize : 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,
                                    shape: BoxShape.rectangle,
                                    borderRadius: BorderRadius.circular(tabletAppContext.configuration!.roundedValue?.toDouble() ?? 10.0),
                                    boxShadow: [
                                      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!.firstWhere((translation) => translation.language == appContext.getContext().language).value != null ? i.description!.firstWhere((translation) => translation.language == appContext.getContext().language).value! : "",
                                        textStyle: TextStyle(fontSize: kIsWeb ? kWebDescriptionSize : 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 ?? kTestSecondColor,
                ),
              )
          ),
          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 ?? kTestSecondColor,
                ),
              )
          ),
          if(sliderDTO.contents != null && sliderDTO.contents!.length > 0)
            Padding(
              padding: widget.section!.parentId == null ? EdgeInsets.only() : const EdgeInsets.only(left: 15, bottom: 10),
              child: Align(
                  alignment: widget.section!.parentId == null ? Alignment.bottomCenter : Alignment.bottomLeft,
                  child: InkWell(
                    onTap: () {
                      sliderController!.previousPage(duration: new Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                    },
                    child: ValueListenableBuilder<int>(
                        valueListenable: currentIndex,
                        builder: (context, value, _) {
                        return Text(
                          value.toString()+'/'+sliderDTO.contents!.length.toString(),
                          style: TextStyle(fontSize: 25, fontWeight: FontWeight.w500),
                        );
                      }
                    ),
                  )
              ),
            ),
          if(sliderDTO.contents == null || sliderDTO.contents!.length == 0)
              Center(child: Text("Aucun contenu à afficher", style: TextStyle(fontSize: kNoneInfoOrIncorrect)))
          // 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;
    TabletAppContext tabletAppContext = appContext.getContext() as TabletAppContext;

    switch(i.resourceType) {
      case ResourceType.Image:
        widgetToInclude = PhotoView(
          imageProvider: ImageCustomProvider.getImageProvider(appContext, i.resourceId!, i.resourceUrl!),
          minScale: PhotoViewComputedScale.contained * 0.8,
          maxScale: PhotoViewComputedScale.contained * 3.0,
          backgroundDecoration: BoxDecoration(
            color: kBackgroundSecondGrey,
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(tabletAppContext.configuration!.roundedValue?.toDouble() ?? 15.0),
          ),
        );
        break;
      case ResourceType.ImageUrl:
        widgetToInclude = PhotoView(
          imageProvider: CachedNetworkImageProvider(i.resourceUrl!),
          minScale: PhotoViewComputedScale.contained * 0.8,
          maxScale: PhotoViewComputedScale.contained * 3.0,
          backgroundDecoration: BoxDecoration(
            color: kBackgroundSecondGrey,
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(tabletAppContext.configuration!.roundedValue?.toDouble() ?? 15.0),
          ),
        );
        break;
      case ResourceType.Video:
      case ResourceType.VideoUrl:
      case ResourceType.Audio:
        widgetToInclude = Container(
          decoration: BoxDecoration(
            //color: kBackgroundSecondGrey,
            //shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(tabletAppContext.configuration!.roundedValue?.toDouble() ?? 15.0),
          ),
          child: showElementForResource(ResourceDTO(id: i.resourceId, url: i.resourceUrl, type: i.resourceType), 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,
          ),
        ),
      ),
    );
  }
}