define([
  // dojo core
  'dojo/_base/declare', // Used to declare the actual widget
  'dojo/_base/lang',
  'dojo/dom-style',
  'dojo/on', // To connect events

  // Optimizely
  'epi/shell/widget/FormContainer', // Opti base widget to extend
], function (declare, lang, domStyle, on, FormContainer) {
  const DEFAULT= 0;
  const OPTION_1 = 1;
  const OPTION_2 = 2;

  return declare('myapp.editors.customNavigation', [FormContainer], {
    widgetsList: {},

    _onFormCreated: function () {
      this.inherited(arguments);
      this._bindContentAreaEvent();
    },

    onFieldCreated: function (fieldName, widget) {
      this.inherited(arguments);
      this.widgetsList[fieldName] = widget;
    },

    _bindContentAreaEvent: function () {
      // Widgets
      var contentAreaWidget = this.widgetsList['navigationItems'];
      var siteNavigationTypeWidget = this.widgetsList['navigationType'];
      var topLevelLinksWidget = this.widgetsList['topLevelLinks'];
      var menuDirectionWidget = this.widgetsList['menuDirection'];

      // Setup on page load
      if (!siteNavigationTypeWidget.value || siteNavigationTypeWidget.value == DEFAULT) {
        this._setWidgetDisplays(contentAreaWidget, topLevelLinksWidget, menuDirectionWidget);
      } else if (siteNavigationTypeWidget.value === OPTION_1) {
        this._setWidgetDisplays(topLevelLinksWidget, contentAreaWidget, menuDirectionWidget);
      } else if (siteNavigationTypeWidget.value === OPTION_2) {
        this._setWidgetDisplays(menuDirectionWidget, topLevelLinksWidget, contentAreaWidget);
      }

      // Bind event
      this.own(
        siteNavigationTypeWidget.on(
          'change',
          lang.hitch(this, function (value) {
            if (!value || value == CONTENT_AREA) {
              this._setWidgetDisplays(contentAreaWidget, topLevelLinksWidget, menuDirectionWidget);
            } else if (value === TOP_LEVEL_LINKS) {
              this._setWidgetDisplays(topLevelLinksWidget, contentAreaWidget, menuDirectionWidget);
            } else if (value === CURRENT_CONTENT) {
              this._setWidgetDisplays(menuDirectionWidget, topLevelLinksWidget, contentAreaWidget);
            }
          }),
        ),
      );
    },

    _setWidgetDisplays: function (widgetToShow, ...widgetsToHide) {
      domStyle.set(widgetToShow.domNode.parentElement, 'display', 'block');
      widgetsToHide.forEach((node) => domStyle.set(node.domNode.parentElement, 'display', 'none'));
    },
  });
});