const VISUAL_GRAPH_EXPAND_TITLE = 'guide.step_plugin.visual-graph-expand.title';
const VISUAL_GRAPH_EXPAND_CONTENT = 'guide.step_plugin.visual-graph-expand.content';

/**
 * @name visual-graph-expand
 * @memberof module:Interactive Guide
 *
 * @description
 * The `visual-graph-expand` guide step that explains how to expand a node in the Visual Graph by double-clicking it.
 *
 * <img src="resources/guides/visual-graph/visual-graph-expand.png" style="height:200px; border: solid; border-width:1px"/>
 *
 * This step can be configured using the common options defined in [Options](#.Options).
 * Additionally, the following specific option is available:
 *
 * Options:
 * @property {string} [options.iri] - The IRI used to build the element selector for the node and in the translations.
 *
 * @example
 * ```json
 * {
 *   "guideBlockName": "visual-graph-expand",
 *   "options": {
 *     "iri": "http://example.org/resource",
 *   }
 * }
 * ```
 */
const step = {
  guideBlockName: 'visual-graph-expand',
  getSteps: function(options, services) {
    const GuideUtils = services.GuideUtils;
    const $rootScope = services.$rootScope;
    const $route = services.$route;
    const translate = services.translate;
    const elementSelector = `.node-wrapper[id^="${options.iri}"] circle`;

    // Expands visual graph when a node is double-clicked.
    const dblClickFunction = (guide) => () => {
      GuideUtils.graphVizExpandNode(elementSelector);
      guide.getCurrentStep().hide();
      GuideUtils.awaitAlphaDropD3(null, $rootScope)()
        .then(() => {
          guide.next();
        });
    };

    return [
      {
        guideBlockName: 'clickable-element',
        options: {
          title: translate(this.translationBundle, VISUAL_GRAPH_EXPAND_TITLE),
          content: translate(this.translationBundle, VISUAL_GRAPH_EXPAND_CONTENT, {iriLabel: options.iri}),
          url: 'graphs-visualizations',
          canBePaused: false,
          class: 'visual-graph-expand-node',
          elementSelector,
          // Disable default behavior of service when element is clicked.
          advanceOn: undefined,
          onNextClick: (guide) => {
            GuideUtils.graphVizExpandNode(elementSelector);
            guide.getCurrentStep().hide();
            GuideUtils.awaitAlphaDropD3(null, $rootScope)()
              .then(() => {
                guide.next();
              });
          },
          show: (guide) => () => {
            // Add "dblclick" listener to the element. Processing of double-click event is disabled for the visual graph when guide is started.
            // So we have expanded the graph manually when a selected node is double-clicked.
            $(elementSelector).on('dblclick.onNodeDbClicked', dblClickFunction(guide));
          },
          hide: () => () => {
            // Remove the "dblclick" listener of element. It is important when step is hided.
            $(elementSelector).off('dblclick.onNodeDbClicked');
          },
          beforeShowPromise: () => {
            $route.reload();
            return GuideUtils.deferredShow(50)()
              .then(() => {
                return GuideUtils.awaitAlphaDropD3(elementSelector, $rootScope)();
              });
          },
          initPreviousStep: (services, stepId) => {
            const previousStep = services.ShepherdService.getPreviousStepFromHistory(stepId);
            return previousStep.options.initPreviousStep(services, previousStep.id)
              .then(() => {
                const currentStepId = services.ShepherdService.getCurrentStepId();
                // Skip expanding of node if last step is "visual-graph-expand"
                if (currentStepId === stepId) {
                  return Promise.resolve;
                }

                GuideUtils.graphVizExpandNode(elementSelector);
                return GuideUtils.deferredShow(50)()
                  .then(() => {
                    return GuideUtils.awaitAlphaDropD3(null, $rootScope)();
                  });
              });
          },
          ...options
        }
      }
    ];
  },
  translationBundle: {
    en: {
      [VISUAL_GRAPH_EXPAND_TITLE]: 'Visual graph: expand node',
      [VISUAL_GRAPH_EXPAND_CONTENT]: 'Double click on <b>{{iriLabel}}</b> to expand the graph.'
    },
    fr: {
      [VISUAL_GRAPH_EXPAND_TITLE]: 'Graphe visuel : développer un nœud',
      [VISUAL_GRAPH_EXPAND_CONTENT]: 'Double-cliquez sur <b>{{iriLabel}}</b> pour développer le graphique.'
    }
  }
};

export function register(registry) {
  registry.add('guide.step', step);
}