import 'dart:convert';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:manager_api_new/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/Services/apiService.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<ContentDTO?> contentsDTO;
  final double height;
  SliderImagesWidget({required this.resources, required this.height, required this.contentsDTO});

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

class _SliderImagesWidget extends State<SliderImagesWidget> {
  List<ResourceModel?> resourcesInWidget = [];
  late CarouselSliderController? sliderController;
  final ValueNotifier<int> currentIndex = ValueNotifier<int>(1);

  @override
  void initState() {
    sliderController = CarouselSliderController();
    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 Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        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.value = index + 1;
                          //});
                        },
                        height: widget.height * 0.86,
                        enlargeCenterPage: true,
                        reverse: false,
                      ),
                      items: resourcesInWidget.map<Widget>((i) {
                        return Builder(
                          builder: (BuildContext context) {
                            //print(widget.imagesDTO[currentIndex-1]);
                            return FutureBuilder(
                                future: ApiService.getResource(appContext, visitAppContext.configuration!, i!.id!),
                                builder: (context, AsyncSnapshot<dynamic> snapshot) {
                                  return Padding(
                                    padding: const EdgeInsets.only(top: 5.0),
                                    child: InkWell(
                                      onTap: () {
                                        showImagePopup(widget.contentsDTO[currentIndex.value-1]!, i, appContext, context, size, snapshot.data);
                                      },
                                      child: ClipRRect(
                                        borderRadius: BorderRadius.circular(15.0),
                                        child: visitAppContext.configuration!.isOffline! ?
                                          snapshot.data != null ?
                                            Image.file(
                                              snapshot.data!,
                                              fit: BoxFit.cover,
                                            ) : null :
                                            Image.network(
                                                i.source!,
                                                loadingBuilder: (BuildContext context, Widget child,
                                                    ImageChunkEvent? loadingProgress) {
                                                  if (loadingProgress == null) {
                                                    return child;
                                                  }
                                                  return Center(
                                                    child: CircularProgressIndicator(
                                                      color: kMainColor1,
                                                      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.4,
                  right: 0,
                  child: InkWell(
                    onTap: () {
                      sliderController!.nextPage(duration: const Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                    },
                    child: const Icon(
                      Icons.chevron_right,
                      size: 45,
                      color: kMainColor2,
                    ),
                  )
              ),
              if(resourcesInWidget.length > 1)
                Positioned(
                  top: widget.height * 0.4,
                  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: kMainColor2,
                    ),
                  )
              ),
              if(resourcesInWidget.isEmpty)
                  const Center(child: Text("Aucune image à afficher", style: TextStyle(fontSize: kNoneInfoOrIncorrect)))
            ]
        ),
        if(resourcesInWidget.isNotEmpty)
          Align(
              alignment: Alignment.bottomCenter,
              child: ValueListenableBuilder<int>(
                valueListenable: currentIndex,
                builder: (context, value, _) {
                  return Text(
                    currentIndex.value.toString()+'/'+resourcesInWidget.length.toString(),
                    style: const TextStyle(fontSize: kArticleContentSize, fontWeight: FontWeight.w500, color: kMainColor2),
                  );
                },
              )
          ),
      ],
    );
  }
}