q1.js

import flux from 'core/flux';
import React from 'react';
import historyUtil from 'optly/utils/history';
import ui from 'core/ui';
import Vue from 'vue';
import PropTypes from 'prop-types';
import Immutable from 'optly/immutable';

import { getters as CurrentLayerGetters } from 'bundles/p13n/modules/current_layer';
import { getters as CurrentProjectGetters } from 'optly/modules/current_project';
import { actions as CustomCodeActions, getters as CustomCodeGetters } from 'bundles/p13n/modules/custom_code';
import {
  actions as EditorActions,
  getters as EditorGetters,
} from 'bundles/p13n/modules/editor';
import { getters as LiveCommitTagGetters } from 'optly/modules/entity/live_commit_tag';
import { actions as P13NUIActions } from 'bundles/p13n/modules/ui';
import UrlHelper from 'bundles/p13n/url_helper';
import vueHelpers from 'optly/utils/vue_helpers';
import SidebarComponent from 'bundles/p13n/sections/manager_mvt/components/sidebar';
import RegionComponent from 'react_components/region';
import EditorComponent from 'bundles/p13n/components/editor/editor';

import classNames from 'classnames';
import getReactWrapperForVueComponent from 'react_components/vue_wrapper';

import { enums as SectionModuleEnums, getters as SectionModuleGetters } from '../../section_module';
import MvtSectionsComponent from './components/mvt_sections_container';
import Template from './template.html';

let ReactWrappedEditor;

export default ui.connectGetters(class VariationsSections extends React.Component {
  static componentId = 'manager-mvt-variations-sections';

  static propTypes = {
    currentLayer: PropTypes.instanceOf(Immutable.Map).isRequired,
    currentLayerId: PropTypes.number.isRequired,
    currentProjectId: PropTypes.number.isRequired,
    currentlyEditingChangeIsDirty: PropTypes.bool.isRequired,
    destinationLayerExperimentId: PropTypes.number.isRequired,
    hasDirtyVariationCustomCode: PropTypes.bool.isRequired,
    liveTag: PropTypes.object.isRequired,
    showEditor: PropTypes.bool.isRequired,
  };

  constructor(props) {
    super(props);
    this.editorComponentInstance;

    ReactWrappedEditor = getReactWrapperForVueComponent(vueHelpers.extendComponent(EditorComponent, {
      // For preloading variations.
      // Later on, when we allow read-only editor for combinations, we should probably preload these
      // as well. Right now, these are just the section variations.
      variationsGetter: SectionModuleGetters.orderedVariations,
      actionChangesGetter: CurrentLayerGetters.p13nActionChanges,
      onActionSelect: this.onActionSelect,
    }));

    this.props.setBeforeLeave((executeRoute) => {
      const shouldConfirmNavigation = this.props.currentlyEditingChangeIsDirty || this.props.hasDirtyVariationCustomCode;
      P13NUIActions.confirmNavigation(shouldConfirmNavigation, tr('campaign'), () => {
        EditorActions.resetCurrentlyEditingDirtyChange();
        CustomCodeActions.resetCustomCodeTabsDirty();
        executeRoute();
      });
    });
  }

  renderSidebar() {
    ui.renderRegion('p13n-editor-sidebar', {
      component: <SidebarComponent activeTab={SectionModuleEnums.Tabs.VARIATIONS} />, // eslint-disable-line
    });
  }

  navigateToEditor(data) {
    // prettify this
    this.editorComponentInstance.$options.methods.actionSelected(data, this.editorComponentInstance);
  }

  clearEditorState() {
    EditorActions.unsetCurrentlyEditingChange();
    EditorActions.unselectAction();
    this.renderSidebar();
  }

  showCampaignNavSidebar() {
    const mvtHomeUrl = UrlHelper.mvtSectionsDashboard(this.props.currentProjectId, this.props.destinationLayerExperimentId);
    historyUtil.pushState(mvtHomeUrl, document.title);
    this.renderSidebar();
  }

  onActionSelect = (data) => {
    if (data.shouldShowCampaignNavSidebar) {
      this.showCampaignNavSidebar();
      return;
    }

    const variationUrl = UrlHelper.mvtExperimentEditor(this.props.currentProjectId, this.props.destinationLayerExperimentId, data.experimentOrSectionId, data.variationId);
    historyUtil.pushState(variationUrl, document.title);
    this.navigateToEditor(data);
  };

  componentDidMount() {
    this.renderSidebar();

    if (this.$options && this.$options.variationId && this.$options.experimentOrSectionId) {
      
      // TO DO STILL
      debugger;
      this.navigateToEditor(this.$options);
    }
  }

  static $beforeLeave = (executeRoute) => {
    debugger;
    const shouldConfirmNavigation = this.props.currentlyEditingChangeIsDirty || this.props.hasDirtyVariationCustomCode;
    P13NUIActions.confirmNavigation(shouldConfirmNavigation, tr('campaign'), () => {
      EditorActions.resetCurrentlyEditingDirtyChange();
      CustomCodeActions.resetCustomCodeTabsDirty();
      executeRoute();
    });
  };

  render() {
    const regionMap = {
      1: ['manager-mvt-nav-sidebar'],
      2: ['p13n-change-list-sidebar'],
      3: ['p13n-change-selector-sidebar'],
      4: ['p13n-change-editor-sidebar', 'p13n-insert-html-sidebar', 'p13n-insert-image-sidebar', 'p13n-widget-config-sidebar', 'p13n-redirect-editor-sidebar'],
    };

    const editorClassNames = classNames({
      'two-col__content': true,
      'background--faint': true,
      'display--none': !this.props.showEditor,
    });
    console.log('QQQ showEditor:', this.props.showEditor);

    return (
      <div className="two-col" data-test-section="manager-mvt-sections-dashboard">
        <div className="two-col__nav" data-test-section="manager-mvt-sections-dashboard-sidebar">
          <RegionComponent
            regionId='p13n-editor-sidebar'
            regionMap={ regionMap }
          />
        </div>
        <div className={ editorClassNames } data-test-section="manager-mvt-editor">
          <ReactWrappedEditor
            className="two-col__content"
            vueComponentRef={ vueComponent => this.editorComponentInstance = vueComponent }
          />
        </div>

        { !this.props.showEditor && (
          <div className="two-col__content background--faint" data-test-section="manager-mvt-variations-sections">
            <MvtSectionsComponent
              onActionSelect={ this.onActionSelect }
            />
          </div>
        ) }

      </div>
    );
  }
}, {
  showEditor: SectionModuleGetters.showEditor,
  currentLayer: CurrentLayerGetters.layer,
  currentLayerId: CurrentLayerGetters.id,
  currentProjectId: CurrentProjectGetters.id,
  destinationLayerExperimentId: SectionModuleGetters.destinationLayerExperimentId,
  liveTag: [
    LiveCommitTagGetters.entityCache,
    function(commitTags) {
      const liveTag = commitTags.find(function(commitTag) {
        return commitTag.get('layer_id') === flux.evaluateToJS(CurrentLayerGetters.id);
      });
      return liveTag ? liveTag.toJS() : {};
    },
  ],
  currentlyEditingChangeIsDirty: EditorGetters.currentlyEditingChangeIsDirty,
  hasDirtyVariationCustomCode: CustomCodeGetters.hasDirtyCustomCode,
});