import 'dart:js_interop';

import 'package:flutter/material.dart';
import 'package:manager_app/Components/common_loader.dart';
import 'package:manager_app/Components/message_notification.dart';
import 'package:manager_app/Models/managerContext.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/client.dart';
import 'package:manager_app/constants.dart';
import 'package:manager_api_new/api.dart';
import 'dart:convert';

import 'package:provider/provider.dart';

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

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

class _MenuConfigState extends State<MenuConfig> {
  late MenuDTO menuDTO;
  late List<dynamic> rawSubsections;

  @override
  void initState() {
    super.initState();
    menuDTO = widget.initialValue;
  }

  @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) async {

      // TODO Edit order (copy quiz question order logic)
      if (newIndex > oldIndex) {
        newIndex -= 1;
      }
      try {
        final SectionDTO item = menuDTO.sections![oldIndex];
        //quizzDTO.questions!.insert(newIndex, item);

        item.order = newIndex;
        await (appContext.getContext() as ManagerAppContext).clientAPI!.sectionApi!.sectionUpdate(item);
        showNotification(kSuccess, kWhite, "L'ordre des sous sections a été mis à jour avec succès", context, null);
        setState(() {
          // refresh ui
          print("Refresh UI");
        });
      } catch(e) {
        showNotification(kError, kWhite, "Une erreur est survenue lors de la mise à jour de l'ordre des sous sections", context, null);
      }

      /*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.35,
            constraints: BoxConstraints(maxHeight: 300, minHeight: 250),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child : FutureBuilder(
                future: getSubsections((appContext.getContext() as ManagerAppContext).clientAPI!),
                builder: (context, AsyncSnapshot<dynamic> snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return Center(child: CommonLoader());
                  } else {
                    if (snapshot.connectionState == ConnectionState.done) {
                      var rawList = snapshot.data;
                      rawSubsections = jsonDecode(jsonEncode(snapshot.data));
                      rawSubsections = rawSubsections.map((json) => SectionDTO.fromJson(json)).toList();
                      List<SectionDTO> sectionList = rawSubsections.whereType<SectionDTO>().toList();

                      menuDTO.sections = sectionList;
                      //menuDTO.sections!.sort((a, b) => a.order!.compareTo(b.order!));

                      return ReorderableListView(
                        onReorder: _onReorder,
                        scrollDirection: Axis.horizontal,
                        padding: const EdgeInsets.symmetric(vertical: 15.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());
                                  });
                                },
                                rawList[index]
                            );
                          },
                        ),
                      );
                    } else {
                      return Center(child: Text(
                          "Une erreur est survenue lors de la récupération des sous sections"));
                    }
                  }
                }
              ),
            ),
          ),
          Positioned(
            top: 0,
            right: 0,
            child: InkWell(
              onTap: () async {
                var newSubsection = await showNewSection(
                    (appContext.getContext() as ManagerAppContext).selectedConfiguration!.id!,
                    appContext,
                    context,
                    true,
                    false
                );
                try {
                  if(newSubsection != null)
                  {
                    newSubsection.instanceId = (appContext.getContext() as ManagerAppContext).instanceId;
                    newSubsection.isBeacon = false;
                    await (appContext.getContext() as ManagerAppContext).clientAPI!.sectionApi!.sectionCreate(newSubsection);
                    showNotification(kSuccess, kWhite, 'La sous section a été créée avec succès', context, null);
                    setState(() {
                      // refresh ui
                      print("Refresh UI");
                    });
                  }
                } catch(e) {
                  showNotification(kError, kWhite, 'Une erreur est survenue lors de la création de la sous section', context, 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
                    ),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  Future<List<dynamic>?> getSubsections(Client client) async {
    final rawList = await client.sectionApi!.sectionGetAllSectionSubSections(menuDTO.id!);
    var sections = rawList.map((json) => SectionDTO.fromJson(json)).toList();
    return rawList ?? [];
  }
}


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
      ),
    ],
  );
}