import 'package:flutter/material.dart';
import 'package:manager_app/Components/audio_input_container.dart';
import 'package:manager_app/Components/check_input_container.dart';
import 'package:manager_app/Components/multi_string_input_container.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 ArticleConfig extends StatefulWidget {
  final String color;
  final String label;
  final String initialValue;
  final ValueChanged<String> onChanged;
  const ArticleConfig({
    Key key,
    this.color,
    this.label,
    this.initialValue,
    this.onChanged,
  }) : super(key: key);

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

class _ArticleConfigState extends State<ArticleConfig> {
  ArticleDTO articleDTO;

  @override
  void initState() {
    super.initState();
    articleDTO = ArticleDTO.fromJson(json.decode(widget.initialValue));
    List<ImageDTO> test = new List<ImageDTO>.from(articleDTO.images);

    articleDTO.images = test;
    articleDTO.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 = articleDTO.images.removeAt(oldIndex);
          articleDTO.images.insert(newIndex, item);

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

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

    return
      SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: size.height * 0.15,
              //width: size.width * 0.5,//,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Column(
                    children: [
                      MultiStringContainer(
                        label: "Contenu affiché :",
                        modalLabel: "Contenu",
                        color: kPrimaryColor,
                        initialValue: articleDTO != null ? articleDTO.content : [],
                        isTitle: false,
                        onGetResult: (value) {
                          setState(() {
                            if (articleDTO.content != value) {
                              articleDTO.content = value;
                              //save(true, articleDTO, appContext);
                              widget.onChanged(jsonEncode(articleDTO).toString());
                            }
                          });
                        },
                        maxLines: 1,
                      ),
                      CheckInputContainer(
                        label: "Contenu au-dessus :",
                        isChecked: articleDTO.isContentTop,
                        onChanged: (value) {
                          setState(() {
                            //print(value);
                            articleDTO.isContentTop = value;
                            widget.onChanged(jsonEncode(articleDTO).toString());
                          });
                        },
                      ),
                    ],
                  ),

                  Column(
                    children: [
                      MultiStringContainer(
                        label: "Audio :",
                        isAudio: true,
                        modalLabel: "Audio",
                        color: kPrimaryColor,
                        initialValue: articleDTO != null ? articleDTO.audioIds : [],
                        isTitle: false,
                        onGetResult: (value) {
                          setState(() {
                            if (articleDTO.audioIds != value) {
                              articleDTO.audioIds = value;
                              //save(true, articleDTO, appContext);
                              widget.onChanged(jsonEncode(articleDTO).toString());
                            }
                          });
                        },
                        maxLines: 1,
                      ),
                      CheckInputContainer(
                        label: "Lecture auto audio :",
                        isChecked: articleDTO.isReadAudioAuto,
                        onChanged: (value) {
                          setState(() {
                            //print(value);
                            articleDTO.isReadAudioAuto = value;
                            widget.onChanged(jsonEncode(articleDTO).toString());
                          });
                        },
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25),
                    border: Border.all(width: 1.5, color: kSecond)
                ),
                child: Stack(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 40, left: 10, right: 10, bottom: 10),
                      child: Container(
                        height: 250,
                        width: size.width * 0.95,
                        child: ReorderableListView(
                          onReorder: _onReorder,
                          scrollDirection: Axis.horizontal,
                          padding: const EdgeInsets.symmetric(vertical: 20.0),
                          children: List.generate(
                            articleDTO.images.length,
                              (index) {
                              return ListViewCardImage(
                                  articleDTO.images,
                                  index,
                                  Key('$index'),
                                  appContext,
                                  (images) {
                                    setState(() {
                                      List<ImageDTO> test = new List<ImageDTO>.from(images);
                                      articleDTO.images = test;
                                      List<ImageDTO> testToSend = new List<ImageDTO>.from(images);
                                      testToSend = testToSend.where((element) => element.source_ != null).toList();
                                      var articleToSend = new ArticleDTO();
                                      articleToSend.images = testToSend;
                                      articleToSend.audioIds = articleDTO.audioIds;
                                      articleToSend.isContentTop = articleDTO.isContentTop;
                                      articleToSend.content = articleDTO.content;
                                      articleToSend.isReadAudioAuto = articleDTO.isReadAudioAuto;
                                      articleToSend.qrCode = articleDTO.qrCode;
                                      widget.onChanged(jsonEncode(articleToSend).toString());
                                    });
                                  },
                                true, // don't show titles
                                false // show description
                              );
                            },
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                      top: 10,
                      left: 10,
                      child: Text(
                        "Images",
                        style: TextStyle(fontSize: 15, fontWeight: FontWeight.w500),
                      ),
                    ),
                    Positioned(
                      bottom: 15,
                      right: 15,
                      child: InkWell(
                        onTap: () async {
                          var result = await showNewOrUpdateImageSlider(null, appContext, context, true, false);
                          if (result != null)
                          {
                            setState(() {
                              result.order = articleDTO.images.length;
                              articleDTO.images.add(result);
                              widget.onChanged(jsonEncode(articleDTO).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
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ]),
              ),
            ),
          ],
        ),
      );
  }
}