import 'dart:convert';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:manager_api/api.dart';
import 'package:mymuseum_visitapp/Components/ShowImagePopup.dart';
import 'package:mymuseum_visitapp/Models/resourceModel.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';

class SliderImagesWidget extends StatefulWidget {
  final List<ResourceModel?> resources;
  final List<ImageDTO?> imagesDTO;
  final double height;
  SliderImagesWidget({required this.resources, required this.height, required this.imagesDTO});

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

class _SliderImagesWidget extends State<SliderImagesWidget> {
  List<ResourceModel?> resourcesInWidget = [];
  late CarouselController? sliderController;
  int currentIndex = 1;

  @override
  void initState() {
    sliderController = CarouselController();
    resourcesInWidget = widget.resources;
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    VisitAppContext visitAppContext = appContext.getContext() as VisitAppContext;
    Size size = MediaQuery.of(context).size;
    return Stack(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              if(resourcesInWidget.isNotEmpty)
                CarouselSlider(
                  carouselController: sliderController,
                  options: CarouselOptions(
                    onPageChanged: (int index, CarouselPageChangedReason reason) {
                      setState(() {
                        print("SET STATE");
                        currentIndex = index + 1;
                      });
                    },
                    //  height: widget.height * 0.95,
                    enlargeCenterPage: true,
                    reverse: false,
                  ),
                  items: resourcesInWidget.map<Widget>((i) {
                    return Builder(
                      builder: (BuildContext context) {
                        print(widget.imagesDTO[currentIndex-1]);
                        return InkWell(
                          onTap: () {
                            showImagePopup(widget.imagesDTO[currentIndex-1]!, i!, appContext, context, size);
                          },
                          child: Container(
                            //color: Colors.red,
                            //height: widget.height * 1,
                            //width: size.width * 0.95,
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(15.0),
                              child: visitAppContext.configuration!.isOffline! ?
                              Image.memory(base64Decode(i!.data!)) :
                              Image.network(
                                  i!.source!,
                                  loadingBuilder: (BuildContext context, Widget child,
                                      ImageChunkEvent? loadingProgress) {
                                    if (loadingProgress == null) {
                                      return child;
                                    }
                                    return Center(
                                      child: CircularProgressIndicator(
                                        color: kBlue1,
                                        value: loadingProgress.expectedTotalBytes != null
                                            ? loadingProgress.cumulativeBytesLoaded /
                                            loadingProgress.expectedTotalBytes!
                                            : null,
                                      ),
                                    );
                                  },
                              ) /*PhotoView(
                                imageProvider: Image.memory(base64Decode(i!.data!)).image,
                                minScale: PhotoViewComputedScale.contained * 0.8,
                                maxScale: PhotoViewComputedScale.contained * 3.0,
                                backgroundDecoration: BoxDecoration(
                                  color: Colors.transparent,
                                  /*shape: BoxShape.rectangle,
                                  borderRadius: BorderRadius.circular(15.0),*/
                                ),
                              )*/,
                            ),
                          ),
                        );
                      },
                    );
                  }).toList(),
                ),
            ],
          ),
          if(resourcesInWidget.length > 1)
            Positioned(
              top: widget.height * 0.45,
              right: 0,
              child: InkWell(
                onTap: () {
                  sliderController!.nextPage(duration: const Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                },
                child: const Icon(
                  Icons.chevron_right,
                  size: 45,
                  color: kBlue2,
                ),
              )
          ),
          if(resourcesInWidget.length > 1)
            Positioned(
              top: widget.height * 0.45,
              left: 0,
              child: InkWell(
                onTap: () {
                  if (resourcesInWidget.isNotEmpty) {
                    sliderController!.previousPage(duration: const Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                  }
                },
                child: const Icon(
                  Icons.chevron_left,
                  size: 45,
                  color: kBlue2,
                ),
              )
          ),
          if(resourcesInWidget.isNotEmpty)
            Padding(
              padding: const EdgeInsets.only(bottom: 0),
              child: Align(
                  alignment: Alignment.bottomCenter,
                  child: InkWell(
                    onTap: () {
                      sliderController!.nextPage(duration: const Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                    },
                    child: Text(
                      currentIndex.toString()+'/'+resourcesInWidget.length.toString(),
                      style: const TextStyle(fontSize: kArticleContentSize, fontWeight: FontWeight.w500, color: kBlue2),
                    ),
                  )
              ),
            ),
          if(resourcesInWidget.isEmpty)
              const Center(child: Text("Aucune image à afficher", style: TextStyle(fontSize: kNoneInfoOrIncorrect),))
        ]
    );
  }
}