import 'dart:convert';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:manager_api/api.dart';
import 'package:provider/provider.dart';
import 'package:tablet_app/app_context.dart';
import 'package:tablet_app/constants.dart';
import 'package:photo_view/photo_view.dart';

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

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

class _SliderViewWidget extends State<SliderViewWidget> {
  SliderDTO sliderDTO = SliderDTO();
  CarouselController? sliderController;
  int currentIndex = 1;

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

    sliderDTO.images!.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);

    return Stack(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              if(sliderDTO.images != null && sliderDTO.images!.length > 0)
                CarouselSlider(
                  carouselController: sliderController,
                  options: CarouselOptions(
                    onPageChanged: (int index, CarouselPageChangedReason reason) {
                      setState(() {
                        currentIndex = index + 1;
                      });
                    },
                    height: MediaQuery.of(context).size.height * 0.8,
                    enlargeCenterPage: true,
                    reverse: false,
                  ),
                  items: sliderDTO.images!.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: 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,
                              borderRadius: BorderRadius.circular(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: [
                                        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: PhotoView(
                                                  imageProvider: new NetworkImage(
                                                    i.source_!,
                                                  ),
                                                  minScale: PhotoViewComputedScale.contained * 0.8,
                                                  maxScale: PhotoViewComputedScale.contained * 3.0,
                                                  backgroundDecoration: BoxDecoration(
                                                    color: kBackgroundSecondGrey,
                                                    shape: BoxShape.rectangle,
                                                    borderRadius: BorderRadius.circular(15.0),
                                                  ),
                                                ),
                                              ),
                                            ),
                                          ),
                                        ),
                                        Positioned(
                                            bottom: 0,
                                            right: 0,
                                            child: Padding(
                                              padding: const EdgeInsets.all(15.0),
                                              child: Text(i.title!.firstWhere((translation) => translation.language == appContext.getContext().language).value != null ? i.title!.firstWhere((translation) => translation.language == appContext.getContext().language).value! : "", textAlign: TextAlign.center, style: TextStyle(fontSize: kIsWeb ? kWebTitleSize : kTitleSize, color: kBackgroundLight)),
                                            )
                                        )
                                      ]
                                    ),/**/
                                  ),
                                ),
                                Expanded(
                                  child: Padding(
                                    padding: const EdgeInsets.only(bottom: 10),
                                    child: Container(
                                      width: MediaQuery.of(context).size.width *0.65,
                                      height: MediaQuery.of(context).size.height *0.25,
                                      decoration: BoxDecoration(
                                        color: kBackgroundLight,
                                        shape: BoxShape.rectangle,
                                        borderRadius: BorderRadius.circular(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: Text(i.description!.firstWhere((translation) => translation.language == appContext.getContext().language).value != null ? i.description!.firstWhere((translation) => translation.language == appContext.getContext().language).value! : "", textAlign: TextAlign.center, style: TextStyle(fontSize: kIsWeb ? kWebDescriptionSize : kDescriptionSize)),
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            )
                        );
                      },
                    );
                  }).toList(),
                ),
            ],
          ),
          if(sliderDTO.images != null && sliderDTO.images!.length > 1)
            Positioned(
              top: MediaQuery.of(context).size.height * 0.35,
              right: 60,
              child: InkWell(
                onTap: () {
                  if (sliderDTO.images!.length > 0)
                    sliderController!.nextPage(duration: new Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                },
                child: Icon(
                  Icons.chevron_right,
                  size: 150,
                  color: kMainRed,
                ),
              )
          ),
          if(sliderDTO.images != null && sliderDTO.images!.length > 1)
            Positioned(
              top: MediaQuery.of(context).size.height * 0.35,
              left: 60,
              child: InkWell(
                onTap: () {
                  if (sliderDTO.images!.length > 0)
                    sliderController!.previousPage(duration: new Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                },
                child: Icon(
                  Icons.chevron_left,
                  size: 150,
                  color: kMainRed,
                ),
              )
          ),
          if(sliderDTO.images != null && sliderDTO.images!.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: Text(
                      currentIndex.toString()+'/'+sliderDTO.images!.length.toString(),
                      style: TextStyle(fontSize: 30, fontWeight: FontWeight.w500),
                    ),
                  )
              ),
            ),
          if(sliderDTO.images == null || sliderDTO.images!.length == 0)
              Center(child: Text("Aucune image à 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)),
              ),
            ),
          ),*/
        ]
    );
  }
}