import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:kumi_popup_window/kumi_popup_window.dart';
import 'package:stadtbote/model/task_info.dart';
import 'package:stadtbote/tools/util.dart';

KumiPopupWindow showTakePhotosPopup(BuildContext context, TaskInfo taskInfo, Function() onFinished) {
  return showPopupWindow(
    context,
    //childSize:Size(240, MediaQuery.of(context).size.width * 0.8),
    gravity: KumiPopupGravity.center,
    //curve: Curves.elasticOut,
    bgColor: Colors.grey.withOpacity(0.5),
    clickOutDismiss: true,
    clickBackDismiss: true,
    customAnimation: false,
    customPop: false,
    customPage: false,
    // targetRenderBox: (btnKey.currentContext.findRenderObject() as RenderBox),
    //needSafeDisplay: true,
    underStatusBar: false,
    underAppBar: false,
    //offsetX: -180,
    //offsetY: 50,
    duration: const Duration(milliseconds: 200),
    onShowStart: (pop) {},
    onShowFinish: (pop) {},
    onDismissStart: (pop) {},
    onDismissFinish: (pop) {},
    onClickOut: (pop) {},
    onClickBack: (pop) {},
    childFun: (pop) {
      List<Uint8List> imageList = [];
      List<Widget> imageWidgetsList = [];

      ValueNotifier<List<Widget>> imageWidgetsListNotifier = ValueNotifier<List<Widget>>([]);

      void capturePhoto() async {
        var photo = await Util.capturePhoto();

        if (photo != null) {
          var imageData = await photo.readAsBytes();
          photo.delete();

          imageList.add(imageData);

          imageWidgetsList.clear();
          for(var image in imageList) {
            imageWidgetsList.add(GestureDetector(
              onTap: () {
              },
              child: Image.memory(image),
            ));
          }

          imageWidgetsListNotifier.value = imageWidgetsList;
          imageWidgetsListNotifier.notifyListeners();
        }
      }

      return SizedBox(
          key: GlobalKey(),
          height: 530,
          width: MediaQuery.of(context).size.width * 0.8,
          child: Container(
            height: 100,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.white,
              border: Border.all(
                color: Colors.grey,
                width: 0.5,
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.all(35.0),
              child: Column(
                children: [
                  const Text('Aufgenommene Fotos'),
                  const SizedBox(height: 20),
                  Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: Colors.white,
                      border: Border.all(
                        color: Colors.grey,
                        width: 0.5,
                      ),
                    ),
                    height: 300,
                    child: ValueListenableBuilder<List<Widget>>(
                      valueListenable: imageWidgetsListNotifier,
                      builder: (context, value, child) {
                        return CarouselSlider(
                            options: CarouselOptions(
                              disableCenter: false,
                              enableInfiniteScroll: false,
                            ),
                            items: imageWidgetsList.toList()
                        );
                      },
                    ),
                  ),
                  const SizedBox(height: 20),
                  getDefaultButton('Hinzufügen', buttonHeight: 50, () => {capturePhoto()}),
                  getDefaultButton('Übernehmen', buttonHeight: 50, () => {onFinished()})
                ],
              ),
            ),
          ));
      },
  );
}