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:manager_api_new/api.dart';
import 'dart:convert';

import 'package:provider/provider.dart';

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

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

class _SliderConfigState extends State<SliderConfig> {
  late SliderDTO sliderDTO;

  @override
  void initState() {
    super.initState();

    //sliderDTO = SliderDTO.fromJson(json.decode(widget.initialValue))!;
    sliderDTO = widget.initialValue;
    List<ContentDTO> test = new List<ContentDTO>.from(sliderDTO.contents!);
    sliderDTO.contents = test;
    sliderDTO.contents!.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 ContentDTO item = sliderDTO.contents!.removeAt(oldIndex);
          sliderDTO.contents!.insert(newIndex, item);

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

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

    return Stack(
      children: [
        Container(
          width: size.width * 0.95,
          child: ReorderableListView(
            onReorder: _onReorder,
            scrollDirection: Axis.horizontal,
            padding: const EdgeInsets.symmetric(vertical: 20.0),
            children: List.generate(
              sliderDTO.contents!.length,
              (index) {
                return ListViewCardContent(
                  sliderDTO.contents!,
                  index,
                  Key('$index'),
                  appContext,
                    (images) {
                      setState(() {
                        List<ContentDTO> test = new List<ContentDTO>.from(images);
                        sliderDTO.contents = test;
                        List<ContentDTO> testToSend = new List<ContentDTO>.from(images);
                        testToSend = testToSend.where((element) => element.resource != null && element.resource?.url != null).toList();
                        var sliderToSend = new SliderDTO();
                        sliderToSend.contents = testToSend;
                        widget.onChanged(jsonEncode(sliderToSend).toString());
                      });
                    },
                  true, // show titles
                  true // show descriptions
              );
              },
            ),
          ),
        ),
        Positioned(
          top: 10,
          right: 10,
          child: InkWell(
            onTap: () async {
              var result = await showNewOrUpdateContentSlider(null, appContext, context, true, true);
              if(result != null) {
                setState(() {
                  result.order = sliderDTO.contents!.length;
                  sliderDTO.contents!.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: kSuccess,
                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
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}