import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:manager_app/Components/fetch_section_icon.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/Menu/listView_card_subSection.dart';
import 'package:manager_app/Screens/Configurations/new_section_popup.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 MenuConfig extends StatefulWidget {
  final String color;
  final String label;
  final String initialValue;
  final ValueChanged<String> onChanged;
  const MenuConfig({
    Key key,
    this.color,
    this.label,
    this.initialValue,
    this.onChanged,
  }) : super(key: key);

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

class _MenuConfigState extends State<MenuConfig> {
  MenuDTO menuDTO;

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

    menuDTO = MenuDTO.fromJson(json.decode(widget.initialValue));
    List<SectionDTO> test = new List<SectionDTO>.from(menuDTO.sections);
    menuDTO.sections = test;
  }

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

    return bodyGrid(size, appContext);
  }

  Widget bodyGrid(Size size, AppContext appContext)  {

    void _onReorder(int oldIndex, int newIndex) {
      setState(
            () {
          if (newIndex > oldIndex) {
            newIndex -= 1;
          }
          final SectionDTO item = menuDTO.sections.removeAt(oldIndex);
          menuDTO.sections.insert(newIndex, item);

          /*var i = 0;
          menuDTO.sections.forEach((image) {
            //image.order = i; // TODO
            i++;
          });*/

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

    return SingleChildScrollView(
      child: Stack(
        children: [
          Container(
            height: size.height *0.25,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child : ReorderableListView(
                onReorder: _onReorder,
                scrollDirection: Axis.horizontal,
                padding: const EdgeInsets.symmetric(vertical: 20.0),
                children: List.generate(
                  menuDTO.sections.length,
                      (index) {
                    return ListViewCardSubSection(
                        menuDTO.sections,
                        index,
                        Key('$index'),
                        appContext,
                            (sections) {
                          setState(() {
                            List<SectionDTO> test = new List<SectionDTO>.from(sections);
                            menuDTO.sections = test;
                            widget.onChanged(jsonEncode(menuDTO).toString());
                          });
                        }
                    );
                  },
                ),
              ),
            ),
          ),
          Positioned(
            bottom: 0,
            right: 0,
            child: InkWell(
              onTap: () {
                showNewSection(
                    appContext.getContext().selectedConfiguration.id,
                    appContext,
                    context,
                    true,
                    (SectionDTO newSubsection) {
                      setState(() {
                        //print("RECEIVED new swubssection");
                        //print(newSubsection);
                        menuDTO.sections.add(newSubsection);
                        widget.onChanged(jsonEncode(menuDTO).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
                    ),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  getElement(int index, SectionDTO sectionDTO, Size size, AppContext appContext) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      child: Stack(
        children: [
          Align(
            alignment: Alignment.center,
            child: AutoSizeText(
              sectionDTO.label,
              style: new TextStyle(fontSize: 15),
              maxLines: 2,
              textAlign: TextAlign.center,
            ),
          ),
          Positioned(
            top: 0,
            left: 0,
            child: Icon(
              getSectionIcon(sectionDTO.type),
              color: kSecond,
              size: 18.0,
            ),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            child: InkWell(
                onTap: () {
                  /*showNewSection(appContext.getContext().selectedConfiguration.id, appContext, context, true);*/
                  // TODO ?
                },
                child: Icon(
                  Icons.edit,
                  color: kPrimaryColor,
                  size: 20.0,
                )
            ),
          ),
          Positioned(
            bottom: 0,
            right: 0,
            child: InkWell(
                onTap: () {
                  setState(() {
                    menuDTO.sections.removeAt(index);
                    widget.onChanged(jsonEncode(menuDTO).toString());
                  });
                },
                child: Icon(
                  Icons.delete,
                  color: kPrimaryColor,
                  size: 20.0,
                )
            ),
          )
        ],
      ),
    );
  }
}


boxDecoration(SectionDTO sectionDTO, appContext) {
  return BoxDecoration(
    color: kBackgroundColor,
    shape: BoxShape.rectangle,
    border: Border.all(width: 1.5, color: kSecond),
    borderRadius: BorderRadius.circular(10.0),
    boxShadow: [
      BoxShadow(
        color: kSecond,
        spreadRadius: 0.5,
        blurRadius: 5,
        offset: Offset(0, 1.5), // changes position of shadow
      ),
    ],
  );
}