import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/Slider/listView_card_image.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/Slider/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);
    sliderDTO.images = test;
    sliderDTO.images.sort((a, b) => a.order.compareTo(b.order));
  }

  @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);

          var i = 0;
          sliderDTO.images.forEach((image) {
            image.order = i;
            i++;
          });

          widget.onChanged(jsonEncode(sliderDTO).toString());
        },
      );
    }

    return Stack(
      children: [
        ReorderableListView(
          onReorder: _onReorder,
          scrollDirection: Axis.horizontal,
          padding: const EdgeInsets.symmetric(vertical: 20.0),
          children: List.generate(
            sliderDTO.images.length,
            (index) {
              return ListViewCardImage(
                sliderDTO.images,
                index,
                Key('$index'),
                appContext,
                  (images) {
                    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());
                    });
                  }
            );
            },
          ),
        ),
        Positioned(
          bottom: 0,
          right: 0,
          child: InkWell(
            onTap: () async {
              var result = await showNewOrUpdateImageSlider(null, appContext, context);
              if (result != null)
              {
                setState(() {
                  result.order = sliderDTO.images.length;
                  sliderDTO.images.add(result);
                  widget.onChanged(jsonEncode(sliderDTO).toString());
                });
              }
            },
            child: Container(
              height: MediaQuery.of(context).size.width * 0.04,
              width: MediaQuery.of(context).size.width * 0.04,
              child: Icon(
                Icons.add,
                color: kTextLightColor,
                size: 30.0,
              ),
              decoration: BoxDecoration(
                color: Colors.lightGreen,
                shape: BoxShape.rectangle,
                borderRadius: BorderRadius.circular(20.0),
                boxShadow: [
                  BoxShadow(
                    color: kSecond,
                    spreadRadius: 0.5,
                    blurRadius: 5,
                    offset: Offset(0, 1.5), // changes position of shadow
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}