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

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

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

class _SliderViewWidget extends State<SliderViewWidget> {
  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: Align(
                                        alignment: Alignment.bottomRight,
                                        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: 35, 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: 15)),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                              ],
                            )
                        );
                      },
                    );
                  }).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: const EdgeInsets.only(bottom: 0),
              child: Align(
                  alignment: Alignment.bottomCenter,
                  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"))
          // 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)),
              ),
            ),
          ),*/
        ]
    );
  }
}