/**
 * @license
 * Copyright (c) 2014, 2018, Oracle and/or its affiliates.
 * The Universal Permissive License (UPL), Version 1.0
 */
/*
 * Your application specific code will go here
 */
define([
  "ojs/ojcore",
  "knockout",
  "ojs/ojmodule-element-utils",
  "ojs/ojmodule-element",
  "ojs/ojrouter",
  "ojs/ojknockout",
  "ojs/ojarraytabledatasource",
  "ojs/ojoffcanvas"
], function(oj, ko, moduleUtils) {
  function ControllerViewModel() {
    var self = this;

    // Media queries for repsonsive layouts
    var smQuery = oj.ResponsiveUtils.getFrameworkQuery(
      oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY.SM_ONLY
    );
    self.smScreen = oj.ResponsiveKnockoutUtils.createMediaQueryObservable(
      smQuery
    );
    var mdQuery = oj.ResponsiveUtils.getFrameworkQuery(
      oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY.MD_UP
    );
    self.mdScreen = oj.ResponsiveKnockoutUtils.createMediaQueryObservable(
      mdQuery
    );

    // Router setup
    self.router = oj.Router.rootInstance;
    self.router.configure({
      loadavg: { label: "UNIX.COM", isDefault: true }
      // dashboard: { label: "Warm StandBy" }
      // incidents: { label: "Incidents" },
      //customers: { label: "Customers" },
      // about: { label: "About" }
    });
    oj.Router.defaults["urlAdapter"] = new oj.Router.urlParamAdapter();

    self.moduleConfig = ko.observable({ view: [], viewModel: null });

    self.loadModule = function() {
      ko.computed(function() {
        var name = self.router.moduleConfig.name();
        var viewPath = "views/" + name + ".html";
        var modelPath = "viewModels/" + name;
        var masterPromise = Promise.all([
          moduleUtils.createView({ viewPath: viewPath }),
          moduleUtils.createViewModel({ viewModelPath: modelPath })
        ]);
        masterPromise.then(function(values) {
          self.moduleConfig({ view: values[0], viewModel: values[1] });
        });
      });
    };

    // Navigation setup
    var navData = [
      {
        name: "UNIX.COM",
        id: "loadavg",
        iconClass:
          "oj-navigationlist-item-icon demo-icon-font-24 demo-chart-icon-24 neo-color"
      }
    ];
    self.navDataSource = new oj.ArrayTableDataSource(navData, {
      idAttribute: "id"
    });

    // Drawer
    // Close offcanvas on medium and larger screens
    self.mdScreen.subscribe(function() {
      oj.OffcanvasUtils.close(self.drawerParams);
    });
    self.drawerParams = {
      displayMode: "push",
      selector: "#navDrawer",
      content: "#pageContent"
    };
    // Called by navigation drawer toggle button and after selection of nav drawer item
    self.toggleDrawer = function() {
      return oj.OffcanvasUtils.toggle(self.drawerParams);
    };
    // Add a close listener so we can move focus back to the toggle button when the drawer closes
    $("#navDrawer").on("ojclose", function() {
      $("#drawerToggleButton").focus();
    });

    // Header
    // Application Name used in Branding Area
    self.appName = ko.observable("UNIX.COM Dashboard");
    // User Info used in Global Navigation area
    self.userLogin = ko.observable("neo@unix.com");
    self.neoVersion = ko.observable("v0.28");

    // Footer
    function footerLink(name, id, linkTarget) {
      this.name = name;
      this.linkId = id;
      this.linkTarget = linkTarget;
    }
    self.footerLinks = ko.observableArray([
      new footerLink("Home", "visitUNIX", "https://www.unix.com/"),
      new footerLink("WOL", "wol", "https://www.unix.com/online.php")
    ]);
  }

  return new ControllerViewModel();
});