import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:manager_app/Models/managerContext.dart';
import 'package:manager_app/Screens/Configurations/listView_card_section.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 'package:provider/provider.dart';

class SectionReorderList extends StatefulWidget {
  final String configurationId;
  final List<SectionDTO> sectionsIn;
  final ValueChanged<List<SectionDTO>> onChangedOrder;
  const SectionReorderList({
    Key key,
    this.configurationId,
    this.sectionsIn,
    this.onChangedOrder,
  }) : super(key: key);

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

class _SectionReorderListState extends State<SectionReorderList> {
  List<SectionDTO> sections;

  @override
  void initState() {
    super.initState();
    sections = new List<SectionDTO>.from(widget.sectionsIn);
  }

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

          var i = 0;
          sections.forEach((section) {
            section.order = i;
            i++;
          });

          widget.onChangedOrder(sections);
      },
    );
  }

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

    return Stack(
      children: [
        Padding(
          padding: const EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0, top: 15.0),
          child: ReorderableListView(
            onReorder: _onReorder,
            scrollDirection: Axis.horizontal,
            padding: const EdgeInsets.symmetric(vertical: 20.0),
            children: List.generate(
              sections.length,
                  (index) {
                return ListViewCardSections(
                    sections,
                    index,
                    Key('$index'),
                    appContext,
                    (section) {
                      setState(() {
                        ManagerAppContext managerAppContext = appContext.getContext();
                        managerAppContext.selectedSection = section;
                        appContext.setContext(managerAppContext);
                      });
                    }
                );
              },
            ),
          ),
        ),
        Positioned(
          top: 10,
          left: 10,
          child: Text(
            "Sections",
            style: TextStyle(fontSize: 15),
          ),
        ),
        Positioned(
          bottom: 10,
          right: 10,
          child: InkWell(
            onTap: () {
              showNewSection(widget.configurationId, appContext, context, false, null);
            },
            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
                  ),
                ],
              ),
            ),
          ),
        )
      ],
    );
  }
}