import 'package:auto_size_text/auto_size_text.dart';
import 'package:drag_and_drop_lists/drag_and_drop_item.dart';
import 'package:drag_and_drop_lists/drag_and_drop_list.dart';
import 'package:drag_and_drop_lists/drag_and_drop_lists.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/listViewcard.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/new_update_image_slider.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:managerapi/api.dart';
import 'dart:convert';

import 'package:provider/provider.dart';

class SliderConfig extends StatefulWidget {
  final String color;
  final String label;
  final String initialValue;
  final ValueChanged<String> onChanged;
  const SliderConfig({
    Key key,
    this.color,
    this.label,
    this.initialValue,
    this.onChanged,
  }) : super(key: key);

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

class _SliderConfigState extends State<SliderConfig> {
  SliderDTO sliderDTO;

  @override
  void initState() {


    super.initState();

    sliderDTO = SliderDTO.fromJson(json.decode(widget.initialValue));

    List<ImageDTO> test = new List<ImageDTO>.from(sliderDTO.images);
    test.add(ImageDTO(title: null));

    sliderDTO.images = test;
    print(sliderDTO);
  }

  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    Size size = MediaQuery.of(context).size;

    void _onReorder(int oldIndex, int newIndex) {
      setState(
        () {
          if (newIndex > oldIndex) {
            newIndex -= 1;
          }
          final ImageDTO item = sliderDTO.images.removeAt(oldIndex);
          sliderDTO.images.insert(newIndex, item);
        },
      );
    }

    return ReorderableListView(
      onReorder: _onReorder,
      scrollDirection: Axis.horizontal,
      padding: const EdgeInsets.symmetric(vertical: 25.0),
      children: List.generate(
        sliderDTO.images.length,
        (index) {
          return ListViewCard(
            sliderDTO.images,
            index,
            Key('$index'),
            appContext,
              (images) {
                print(images);
                print("ONCHANEGDE");

                setState(() {
                  List<ImageDTO> test = new List<ImageDTO>.from(images);
                  sliderDTO.images = test;
                  List<ImageDTO> testToSend = new List<ImageDTO>.from(images);
                  testToSend = testToSend.where((element) => element.source_ != null).toList();
                  var sliderToSend = new SliderDTO();
                  sliderToSend.images = testToSend;
                  widget.onChanged(jsonEncode(sliderToSend).toString());
                });
              }
        );
        },
      ),
    );

    return GridView.builder(
        shrinkWrap: true,
        gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 8),
        itemCount: sliderDTO.images.length,
        itemBuilder: (BuildContext context, int index) {
          return
            InkWell(
              onTap: () {
                // Main screen
                showNewOrUpdateImageSlider(
                    sliderDTO.images[index],
                    (value) {
                      print("get result bébé");
                      setState(() {
                        sliderDTO.images.add(value);
                        widget.onChanged(jsonEncode(sliderDTO).toString());
                      });
                    },
                    appContext,
                    context);
              },
              child: Container(
                decoration: boxDecoration(sliderDTO.images[index], appContext),
                padding: const EdgeInsets.all(15),
                margin: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
                child: Align(
                    alignment: Alignment.center,
                    child: getElement(sliderDTO.images[index], size, appContext)
                ),
              ),
            );
        }
    );
  }
}