import 'package:diacritic/diacritic.dart';
import 'package:flutter/material.dart';
import 'package:manager_app/Components/message_notification.dart';
import 'package:manager_app/Components/string_input_container.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:manager_api_new/api.dart';
import 'package:provider/provider.dart';

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

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

class _SectionReorderListState extends State<SectionReorderList> {
  late List<SectionDTO> sections;
  String filterSearch = '';

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

    ManagerAppContext managerAppContext = appContext.getContext();
    ConfigurationDTO currentConfiguration = managerAppContext.selectedConfiguration!;

    return Stack(
      children: [
        Padding(
          padding: const EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0, top: 15.0),
          child: Container(
            height: size.height*0.3,
            child: ReorderableListView.builder(
              itemCount: sections.length,
              onReorder: _onReorder,
              scrollDirection: Axis.horizontal,
              padding: const EdgeInsets.symmetric(vertical: 20.0),
              itemBuilder: (context, index) {
                //final String productName = _products[index];
                return ListViewCardSections(
                    sections,
                    index,
                    Key('$index'),
                    false,
                    //currentConfiguration.isMobile!,
                    appContext,
                      (section) {
                        setState(() {
                          ManagerAppContext managerAppContext = appContext.getContext();
                          managerAppContext.selectedSection = section;
                          appContext.setContext(managerAppContext);
                        });
                    }
                );
              },
              /*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: -20,
          left: 10,
          child: Container(
            height: size.height*0.1,
            constraints: BoxConstraints(minHeight: 85),
            child: StringInputContainer(
              label: "Recherche:",
              isSmall: true,
              fontSize: 15,
              fontSizeText: 15,
              onChanged: (String value) {
                setState(() {
                  filterSearch = value;
                  filterResource();
                });
              },
            ),
          ),
        ),
        Positioned(
          top: 10,
          right: 10,
          child: InkWell(
            onTap: () async {
              var sectionToCreate = await showNewSection(widget.configurationId, appContext, context, false, false/*currentConfiguration.isMobile!*/);
              if(sectionToCreate != null)
              {
                ManagerAppContext managerAppContext = appContext.getContext();
                sectionToCreate.instanceId = managerAppContext.instanceId;
                sectionToCreate.isBeacon = false;
                sectionToCreate.dateCreation = DateTime.now();
                SectionDTO? newSection = await managerAppContext.clientAPI!.sectionApi!.sectionCreate(sectionToCreate);

                showNotification(kSuccess, kWhite, 'La section a été créée avec succès !', context, null);

                widget.askReload();
              }
            },
            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
                  ),
                ],
              ),
            ),
          ),
        )
      ],
    );
  }

  void filterResource() {
    sections = filterSearch.isEmpty ? widget.sectionsIn: widget.sectionsIn.where((SectionDTO section) => removeDiacritics(section.label!.toUpperCase()).contains(removeDiacritics(filterSearch.toUpperCase()))).toList();
  }
}