import 'dart:html';

import 'package:auto_size_text/auto_size_text.dart';
import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:go_router/go_router.dart';
import 'package:manager_app/Models/managerContext.dart';
import 'package:manager_app/Models/menu.dart';
import 'package:manager_app/Models/menuSection.dart';
import 'package:manager_app/Screens/Configurations/configurations_screen.dart';
import 'package:manager_app/Screens/Kiosk_devices/kiosk_screen.dart';
import 'package:manager_app/Screens/Resources/resources_screen.dart';
import 'package:manager_app/Screens/Applications/app_configuration_link_screen.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:manager_app/main.dart';
import 'package:manager_api_new/api.dart';
import 'package:provider/provider.dart';

class MainScreen extends StatefulWidget {
  final InstanceDTO instance;
  final String? view;
  MainScreen({Key? key, required this.instance, required this.view}) : super(key: key);

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

class _MainScreenState extends State<MainScreen> {
  late MenuSection devices;
  late MenuSection configurations;
  late MenuSection resources;

  Menu menu = Menu(title: "MyInfoMate");
  Widget? selectedElement = null;

  final ValueNotifier<int?> currentPosition = ValueNotifier<int?>(null);

  @override
  void initState() {
    super.initState();
    devices = MenuSection(name: "Applications", type: "devices", menuId: 0, subMenu: []);
    if (widget.instance.isMobile!) devices.subMenu.add(MenuSection(name: "Mobile", type: "mobile", menuId: 1, subMenu: []));
    if (widget.instance.isTablet!) devices.subMenu.add(MenuSection(name: "Kiosk", type: "kiosk", menuId: 2, subMenu: []));
    if (widget.instance.isWeb!) devices.subMenu.add(MenuSection(name: "Web", type: "web", menuId: 3, subMenu: []));
    if (widget.instance.isVR!) devices.subMenu.add(MenuSection(name: "VR", type: "vr", menuId: 4, subMenu: []));

    configurations = MenuSection(name: "Configurations", type: "configurations", menuId: 5, subMenu: []);
    resources = MenuSection(name: "Ressources", type: "resources", menuId: 6, subMenu: []);

    menu.sections = [devices, configurations, resources];

    if(currentPosition.value == null) {
      if (widget.instance.isMobile!) {
        currentPosition.value = 1;
      } else if (widget.instance.isTablet!) {
        currentPosition.value = 2;
      } else if (widget.instance.isWeb!) {
        currentPosition.value = 3;
      } else {
        currentPosition.value = 4;
      }
    } else {
      //currentPosition = managerAppContext.currentPositionMenu!;
    }

    selectedElement = initElementToShow(context, widget.view, currentPosition.value!, menu, widget.instance);
  }

  Widget buildMenu(BuildContext context, AppContext appContext, ManagerAppContext managerAppContext, bool isDrawer) {
    return Container(
      width: isDrawer ? null : 250, // fixed width on sidebar, null on drawer for full width
      child: Card(
        color: kWhite,
        margin: const EdgeInsets.symmetric(vertical: 8),
        elevation: 0,
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Container(
                height: 150,
                width: 250,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      constraints: BoxConstraints(maxHeight: 60, minHeight: 40),
                      child: SvgPicture.asset('assets/images/MyInfoMate_logo_only.svg')
                    ),
                    SizedBox(height: 16),
                    Text(
                      menu.title,
                      style: TextStyle(
                        color: kPrimaryColor,
                        fontSize: 25,
                        fontWeight: FontWeight.w400,
                        fontFamily: "Helvetica",
                      ),
                    ),
                  ],
                ),
              ),
            ),
            SizedBox(height: 25),
            Expanded(
              child: Theme(
                data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
                child: ListView(
                  padding: EdgeInsets.zero,
                  children: menu.sections!.map((section) {
                    final router = GoRouter.of(context);
                    final routeMatchList = router.routerDelegate.currentConfiguration;
                    var currentPath = routeMatchList.isNotEmpty ? routeMatchList.matches.first.matchedLocation : null;

                    if (section.subMenu.isEmpty) {
                      return Container(
                        decoration: currentPath!.contains(section.type)
                            ? BoxDecoration(
                          border: Border(
                            right: BorderSide(
                              color: kPrimaryColor,
                              width: 2,
                            ),
                          ),
                        )
                            : null,
                        child: ListTile(
                          title: Text(section.name, style: TextStyle(color: currentPath.contains(section.type) ? kPrimaryColor : kBodyTextColor, fontSize: 22, fontWeight: currentPath.contains(section.type) ? FontWeight.w500 : FontWeight.w100)),
                          selected: currentPosition == section.menuId,
                          onTap: () {
                            //currentPosition.value = section.menuId;
                            context.go('/main/${section.type}');
                            if (isDrawer) Navigator.of(context).pop(); // Close drawer on mobile
                          },
                        ),
                      );
                    } else {
                      return Container(
                        child: ExpansionTile(
                          iconColor: currentPath!.contains("mobile") || currentPath.contains("kiosk") || currentPath.contains("web") || currentPath.contains("vr") ? kPrimaryColor : kBodyTextColor,
                          collapsedIconColor: currentPath.contains("mobile") || currentPath.contains("kiosk") || currentPath.contains("web") || currentPath.contains("vr") ? kPrimaryColor : kBodyTextColor,
                          title: Text(section.name, style: TextStyle(color: currentPath.contains("mobile") || currentPath.contains("kiosk") || currentPath.contains("web") || currentPath.contains("vr") ? kPrimaryColor : kBodyTextColor, fontSize: 22, fontWeight: currentPath.contains("mobile") || currentPath.contains("kiosk") || currentPath.contains("web") || currentPath.contains("vr") ? FontWeight.w500 : FontWeight.w100)),
                          children: section.subMenu.map((subSection) {
                            return Container(
                              decoration: currentPath.contains(subSection.type)
                                  ? BoxDecoration(
                                border: Border(
                                  right: BorderSide(
                                    color: kPrimaryColor,
                                    width: 2,
                                  ),
                                ),
                              ) : null,
                              child: ListTile(
                                title: Padding(
                                  padding: const EdgeInsets.only(left: 16.0),
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      subSection.type == "mobile" ? Icon(Icons.phone_iphone, color: currentPath.contains(subSection.type) ? kPrimaryColor : kBodyTextColor, size: 20) :
                                      subSection.type == "kiosk" ? Icon(Icons.tablet_rounded, color: currentPath.contains(subSection.type) ? kPrimaryColor : kBodyTextColor, size: 20) :
                                      subSection.type == "web" ? Icon(Icons.public_outlined, color: currentPath.contains(subSection.type) ? kPrimaryColor : kBodyTextColor, size: 20) :
                                      subSection.type == "vr" ? Icon(Icons.panorama_photosphere, color: currentPath.contains(subSection.type)? kPrimaryColor : kBodyTextColor, size: 20) : SizedBox(),
                                      Padding(
                                        padding: const EdgeInsets.all(8.0),
                                        child: Text(subSection.name, style: TextStyle(color: currentPath.contains(subSection.type) ? kPrimaryColor : kBodyTextColor, fontSize: 18)),
                                      )
                                    ],
                                  ),
                                ),
                                selected: currentPosition.value == subSection.menuId,
                                onTap: () {


                                  if(currentPath != null && currentPath.contains(subSection.type)) {
                                    // DO NOTHING, we are already display the correct interface
                                  } else {
                                    context.go('/main/${subSection.type}');
                                  }
                                  if (isDrawer) Navigator.of(context).pop();
                                },
                              ),
                            );
                          }).toList(),
                        ),
                      );
                    }
                  }).toList(),
                ),
              ),
            ),
            // Footer: Email + Logout button
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  AutoSizeText(
                    (appContext.getContext() as ManagerAppContext).email ?? "",
                    style: TextStyle(color: kBodyTextColor, fontSize: 16, fontWeight: FontWeight.w300, fontFamily: "Helvetica"),
                    maxLines: 1,
                  ),
                  IconButton(
                    icon: Icon(Icons.logout, color: kPrimaryColor),
                    onPressed: () async {
                      var session = await loadJsonSessionFile();
                      setState(() {
                        Storage localStorage = window.localStorage;
                        localStorage.clear();
                        ManagerAppContext managerAppContext = appContext.getContext();
                        managerAppContext.accessToken = null;
                        managerAppContext.instanceId = null;
                        managerAppContext.instanceDTO = null;
                        appContext.setContext(managerAppContext);

                        context.go('/login');
                      });
                    },
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }


  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    ManagerAppContext managerAppContext = appContext.getContext();

    Size size = MediaQuery.of(context).size;
    bool isMobile = size.width < 850;

    return Scaffold(
      appBar: isMobile
          ? AppBar(
        title: Text(menu.title, style: TextStyle(color: kWhite)),
        backgroundColor: kPrimaryColor,
        leading: Builder(
          builder: (context) => IconButton(
            icon: Icon(Icons.menu, color: kWhite),
            onPressed: () => Scaffold.of(context).openDrawer(),
          ),
        ),
      )
          : null,
      drawer: isMobile ? ValueListenableBuilder<int?>(
        valueListenable: currentPosition,
        builder: (context, value, _) {
          return Drawer(child: buildMenu(context, appContext, managerAppContext, true));
        }
      ) : null,
      body: Row(
        children: [
          if (!isMobile)
            ValueListenableBuilder<int?>(
              valueListenable: currentPosition,
              builder: (context, value, _) {
                return buildMenu(context, appContext, managerAppContext, false);
              }
            ),
          Expanded(
            child: ValueListenableBuilder<int?>(
              valueListenable: currentPosition,
              builder: (context, value, _) {
                selectedElement = initElementToShow(context, widget.view, currentPosition.value!, menu, widget.instance);
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: selectedElement,
                );
              }
            ),
          ),
        ],
      ),
    );
  }
}

  initElementToShow(BuildContext context, String? view, int currentPosition, Menu menu, InstanceDTO instanceDTO) {

    if(view != null) {
      switch (view) {
        case "mobile":
          currentPosition = 1;
          break;
        case "kiosk":
          currentPosition = 2;
          break;
        case "web":
          currentPosition = 3;
          break;
        case "vr":
          currentPosition = 4;
          break;
        case "configurations":
          currentPosition = 5;
          break;
        case "resources":
          currentPosition = 6;
          break;
      }
    }

    MenuSection? elementToShow = menu.sections!.firstWhereOrNull((s) => s.menuId == currentPosition);

    if(elementToShow == null) {
      elementToShow = menu.sections![0].subMenu.where((s) => s.menuId == currentPosition).first;
    }

    switch (elementToShow.type) {
      case 'mobile' :
        var applicationInstanceMobile = instanceDTO.applicationInstanceDTOs!.firstWhere((ai) => ai.appType == AppType.Mobile);
        return Padding(
            padding: const EdgeInsets.all(8.0),
            child: AppConfigurationLinkScreen(applicationInstanceDTO: applicationInstanceMobile)
        );
      case 'kiosk' :
        var applicationInstanceTablet = instanceDTO.applicationInstanceDTOs!.firstWhere((ai) => ai.appType == AppType.Tablet);
        return Padding(
            padding: const EdgeInsets.all(8.0),
            child: KioskScreen(applicationInstanceDTO: applicationInstanceTablet)
        );
      case 'web' :
        var applicationInstanceWeb = instanceDTO.applicationInstanceDTOs!.firstWhere((ai) => ai.appType == AppType.Web);
        return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text("TODO web")
        );
      case 'vr' :
        var applicationInstanceVR = instanceDTO.applicationInstanceDTOs!.firstWhere((ai) => ai.appType == AppType.VR);
        return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text("TODO vr")
        );
      case 'configurations' :
        return Padding(
            padding: const EdgeInsets.all(8.0),
            child: ConfigurationsScreen()
        );
      case 'resources' :
        return Padding(
            padding: const EdgeInsets.all(8.0),
            child: ResourcesScreen(
                resourceTypes: [
                  ResourceType.Audio,
                  ResourceType.Image,
                  ResourceType.ImageUrl,
                  ResourceType.Video,
                  ResourceType.VideoUrl,
                  ResourceType.Pdf,
                  ResourceType.Json,
                  ResourceType.JsonUrl
                ]
            )
        );
      default:
        return Text('Hellow default');
  }
}