<div class="WorkflowDesignerToolbarMultiBlock">

  <div v-if="!settings.hideElementsToolbar && !settings.readonly" class="WorkflowDesignerToolbarBlock Horizontal">
    <el-menu mode="horizontal" >
      <el-submenu index="1">
        <template slot="title">{{ labels.Menu }}</template>
        <el-submenu index="1-1">
          <template slot="title">{{ labels.File }}</template>
          <el-menu-item index="1-1-1" @click="uploadXML">
            {{ labels.UploadScheme }}
          </el-menu-item>
          <el-menu-item v-if="settings.showBpmnMenu" index="1-1-2" @click="uploadBPMN">
            {{ labels.UploadBPMN }}
          </el-menu-item>
          <el-menu-item index="1-1-3" @click="downloadXML">
            {{ labels.DownloadScheme }}
          </el-menu-item>
          <el-menu-item v-if="settings.showBpmnMenu" index="1-1-5" @click="downloadBPMN">
            {{ labels.DownloadBPMN }}
          </el-menu-item>
          <el-menu-item index="1-1-4" @click="showToImageDialog(true)">
            {{ labels.SaveToImage }}
          </el-menu-item>
        </el-submenu>
        <el-submenu index="1-2">
          <template slot="title">{{ labels.Scheme }}</template>
          <el-menu-item index="1-2-1" @click="refresh">{{ labels.Refresh }}</el-menu-item>
          <el-menu-item index="1-2-2" @click="reset">{{ labels.ResetSettings }}</el-menu-item>
          <el-menu-item index="1-2-4" @click="autoArrangement">{{ labels.AutoArrangement }}</el-menu-item>
          <el-menu-item index="1-2-5" @click="showExInfo">
            {{ labels.Info }}
            <i v-if="exinfo" class="el-icon-check"></i>
          </el-menu-item>
          <el-menu-item index="1-2-6" @click="showLegend">
            {{ labels.Legend }}
            <i v-if="legend" class="el-icon-check"></i>
          </el-menu-item>
          <el-menu-item index="1-2-7" @click="clear">{{ labels.Clear }}</el-menu-item>
        </el-submenu>
        <el-submenu index="1-3">
          <template slot="title">{{ labels.Language }}</template>
          <el-menu-item v-for="lang in languagesList" :key="lang.code" style="display: flex" @click="setLanguage(lang.code)">
            <b style="margin-inline-end: 10px">{{ lang.dialect }}</b>
            {{ lang.name }}
            <i v-if="lang.code === language.code" class="el-icon-check"></i>
          </el-menu-item>
        </el-submenu>
        <el-menu-item index="1-4" @click="showInstanceInfo">{{ labels.InstanceInfo }}</el-menu-item>
      </el-submenu>
    </el-menu>

    <el-tooltip :content="labels.Save" v-if="settings.showSaveButton">
      <el-button :class="getButtonClass()" @click="save()">
        <div class="WorkflowDesignerToolbarIcon Save RTLIcon"></div>
      </el-button>
    </el-tooltip>
    <el-tooltip :content="labels.Undo">
      <el-button :class="getButtonClass()" :disabled="undoDisabled" @click="undo()">
        <div class="WorkflowDesignerToolbarIcon Undo RTLIcon"></div>
      </el-button>
    </el-tooltip>
    <el-tooltip :content="labels.Redo">
      <el-button :class="getButtonClass()" :disabled="redoDisabled" @click="redo()">
        <div class="WorkflowDesignerToolbarIcon Redo RTLIcon"></div>
      </el-button>
    </el-tooltip>

    <el-tooltip :content="labels.Elements">
      <el-button :class="getButtonClass(elements)" @click="showElements()">
        <div class="WorkflowDesignerToolbarIcon"><i class="el-icon-circle-plus" style="color: #28ae60;"></i></div>
      </el-button>
    </el-tooltip>

    <el-tooltip :content="labels.CopySelected">
      <el-button :class="getButtonClass()" :disabled="!selected" @click="copySelected()">
        <div class="WorkflowDesignerToolbarIcon CopySelected RTLIcon"></div>
      </el-button>
    </el-tooltip>
    <el-tooltip :content="labels.Delete">
      <el-button :class="getButtonClass()" :disabled="!selected" @click="deleteSelected()">
        <div class="WorkflowDesignerToolbarIcon"><i class="el-icon-delete" style="font-weight: bolder"></i></div>
      </el-button>
    </el-tooltip>
  </div>

  <div v-if="!settings.hideElementsToolbar && !settings.notshowwindows"
       class="WorkflowDesignerToolbarBlock Horizontal">
    <el-tooltip :content="labels.Actors">
      <el-button :class="getButtonClass(actors)" @click="showActors()">
        <div class="WorkflowDesignerToolbarIcon Actors"></div>
      </el-button>
    </el-tooltip>

    <el-tooltip :content="labels.Commands">
      <el-button :class="getButtonClass(commands)" @click="showCommands()">
        <div class="WorkflowDesignerToolbarIcon Commands"></div>
      </el-button>
    </el-tooltip>
    <el-tooltip :content="labels.Timers">
      <el-button :class="getButtonClass(timers)" @click="showTimers()">
        <div class="WorkflowDesignerToolbarIcon Timers"></div>
      </el-button>
    </el-tooltip>
    <el-tooltip v-if="settings.disableCodeActions !== true" :content="labels.CodeActions">
      <el-button :class="getButtonClass(codeactions)" @click="showCodeActions()">
        <div class="WorkflowDesignerToolbarIcon CodeActions"></div>
      </el-button>
    </el-tooltip>
    <el-tooltip :content="labels.Parameters ">
      <el-button :class="getButtonClass(parameters)" @click="showParameters()">
        <div class="WorkflowDesignerToolbarIcon Parameters"></div>
      </el-button>
    </el-tooltip>
    <el-tooltip :content="labels.Localization ">
      <el-button :class="getButtonClass(localization)" @click="showLocalization()">
        <div class="WorkflowDesignerToolbarIcon Localization RTLIcon"></div>
      </el-button>
    </el-tooltip>

    <el-tooltip v-if="settings.readonly && hasAssignments" :content="labels.Assignments">
      <el-button :class="getButtonClass(assignments)" @click="showAssignments()">
        <div class="WorkflowDesignerToolbarIcon Assignments"></div>
      </el-button>
    </el-tooltip>

    <el-tooltip :content="labels.ProcessInfo">
      <el-button :class="getButtonClass(processinfo)" @click="showProcessInfo()">
        <div class="WorkflowDesignerToolbarIcon ProcessInfo"></div>
      </el-button>
    </el-tooltip>

    <el-tooltip v-if="!settings.readonly" :content="labels.Inline">
      <el-button :class="getButtonClass()" @click="inlinePress()">
        <div :class="'WorkflowDesignerToolbarIcon ' + (canBeInlined ? 'Inline' : 'NotInline')"></div>
      </el-button>
    </el-tooltip>

    <el-tooltip v-if="settings.readonly" :content="labels.Label">
      <el-button :class="getButtonClass(logs)" @click="showLogs()">
        <div :class="'WorkflowDesignerToolbarIcon ' + (LogEnabled ? 'LogsEnabled' : 'Logs')"></div>
      </el-button>
    </el-tooltip>
    <el-tooltip v-if="!settings.readonly" :content="labels.Label">
      <el-popover placement="bottom" trigger="click" width="310">
        <div class="el-popover__title">
          {{ labels.Label }}
          <el-switch v-model="LogEnabled" @change="changeLogEnabled"></el-switch>
        </div>
        <div>{{ labels.Description }}</div>

        <el-button slot="reference" :class="getButtonClass(logs)">
          <div :class="'WorkflowDesignerToolbarIcon ' + (LogEnabled ? 'LogsEnabled' : 'Logs')"></div>
        </el-button>
      </el-popover>
    </el-tooltip>
  </div>

  <form id="uploadForm" enctype="multipart/form-data" method="post">
    <input id="uploadFile" name="uploadFile" style="display:none" type="file" @change="uploadChange($event)"></input>
  </form>

  <el-dialog
    :before-close="() => showToImageDialog(false)"
    :modal-append-to-body="false"
    :title="labels.SaveToImage"
    :visible="toImageDialogVisible"
    width="30%">
    <label>{{labels.ImageQuality}}</label>
    <el-slider label="Quality" v-model="imageAspectRatio" :max="10" :min="1" @input="(value) => {imageAspectRatio = value}"></el-slider>
    <el-checkbox v-model="showGrid" >{{labels.ShowGrid}}</el-checkbox>
    <span slot="footer" class="dialog-footer">
        <template>
            <el-button @click="toImage" type="primary" >{{ labels.ButtonTextYes }}</el-button>
            <el-button @click="showToImageDialog(false)">{{ labels.ButtonTextCancel }}</el-button>
        </template>
    </span>
  </el-dialog>
</div>
<script type="application/javascript">
  function toolbar_Init(me) {
    const data = me.VueConfig.data;
    me.VueConfig.methods.UpdateLanguage = function () {
      data.labels = {
        ...WorkflowDesignerConstants.ToolbarLabel,
        ...WorkflowDesignerConstants.Logs,
        ButtonTextYes: WorkflowDesignerConstants.ButtonTextYes,
        ButtonTextCancel: WorkflowDesignerConstants.ButtonTextCancel,
        InformationCopiedToClipboardAndConsole: WorkflowDesignerConstants.InformationCopiedToClipboardAndConsole,
        InformationLoggedToConsole: WorkflowDesignerConstants.InformationLoggedToConsole,
      };
    }

    me.VueConfig.methods.UpdateLanguage();
    const designer = me.graph.designer;
    const isProcess = !!designer.processid;
    data.toImageDialogVisible = false;
    data.imageAspectRatio = 1;
    data.showGrid = false;
    data.legend = false;
    data.logs = false;
    data.settings = null;
    data.hasAssignments = false;
    data.canBeInlined = false;
    data.LogEnabled = false;
    data.language = {};
    data.languagesList = [];

    me.VueConfig.methods.changeLogEnabled = isProcess
      ? designer.changelogenabled : me.graph.setLogEnabled;

    me.VueConfig.methods.onUpdate = function () {
      data.settings = me.graph.Settings;
      data.undoDisabled = me.graph.graphDataIndex <= 0;
      data.redoDisabled = me.graph.graphData && me.graph.graphData.length <= (me.graph.graphDataIndex + 1);
      data.selected = me.graph.selected;
      data.exinfo = me.graph.getParam('exinfo');
      data.canBeInlined = me.graph.data.CanBeInlined;
      data.LogEnabled = isProcess ? designer.LogEnabled : me.graph.data.LogEnabled;

      data.language = designer.getLanguage();
      data.languagesList = Object.values(designer.localizationControl.localization).map(({LangInfo}) => LangInfo);

      var plugins = me.graph.getPluginsNames();

      for (var i = 0; i < plugins.length; i++) {
        if (plugins[i] == 'AssignmentPlugin') {
          data.hasAssignments = true;
          break;
        }
      }

      var windowsNames = [
        {name: 'logs', show: me.VueConfig.methods.showLogs, editmode: true},
        {name: 'legend', show: me.VueConfig.methods.showLegend, editmode: true},
        {name: 'library', show: me.VueConfig.methods.showLibrary, editmode: true},
        {name: 'elements', show: me.VueConfig.methods.showElements, editmode: true, openifnotclosed: true},
        {name: 'actors', show: me.VueConfig.methods.showActors, editmode: false},
        {name: 'timers', show: me.VueConfig.methods.showTimers, editmode: false},
        {name: 'commands', show: me.VueConfig.methods.showCommands, editmode: false},
        {name: 'parameters', show: me.VueConfig.methods.showParameters, editmode: false},
        {name: 'codeactions', show: me.VueConfig.methods.showCodeActions, editmode: false},
        {name: 'localization', show: me.VueConfig.methods.showLocalization, editmode: false},
        {name: 'processinfo', show: me.VueConfig.methods.showProcessInfo, editmode: false}];

      if (data.hasAssignments) {
        windowsNames.push({name: 'assignments', show: me.VueConfig.methods.showAssignments, editmode: false});
      }

      var restoreWindowState = function (obj) {
        if (obj.editmode && data.settings.readonly)
          return;

        data[obj.name] = me.graph.getParam(obj.name);
        if ((data[obj.name] || (data[obj.name] == undefined && obj.openifnotclosed))
          && me[obj.name] == undefined) {
          obj.show();
        }
      }

      if (!data.settings.hideElementsToolbar) {
        windowsNames.forEach(function (w) {
          restoreWindowState(w);
        });
      }
    };

    me.VueConfig.methods.getButtonClass = function (isActive) {
      var res = 'WorkflowDesignerToolbarIconContainer'
      if (isActive) {
        res += ' ' + 'WorkflowDesignerToolbarButtonActive';
      }
      return res;
    };

    me.VueConfig.methods.reset = function () {
      designer.resetLocalStorage();
      location.reload();
    };

    me.VueConfig.methods.showToImageDialog = function (visible) {
      data.toImageDialogVisible = visible;
    };

    me.VueConfig.methods.toImage = function () {
      me.graph.toImage(data.imageAspectRatio, data.showGrid);
      me.VueConfig.methods.showToImageDialog(false);
    };

    me.VueConfig.methods.uploadXML = function () {
      document.getElementById('uploadFile').click();
      me._uploadCallback = designer.uploadscheme;
    };

    me.VueConfig.methods.uploadBPMN = function () {
      document.getElementById('uploadFile').click();
      me._uploadCallback = designer.uploadschemeBPMN;
    };

    me.VueConfig.methods.uploadChange = function () {
      const form = document.getElementById('uploadForm');
      me._uploadCallback(form);
    }

    me.VueConfig.methods.downloadXML = function () {
      designer.downloadscheme();
    };

    me.VueConfig.methods.downloadBPMN = function () {
      designer.downloadschemeBPMN();
    };

    me.VueConfig.methods.clear = function () {
      designer.create(designer.schemecode);
    };

    me.VueConfig.methods.save = function () {
      const {notify} = me.VueConfig.methods;
      const notSavedMessage = `
        ${WorkflowDesignerConstants.SchemeNotSaved}.
        ${WorkflowDesignerConstants.ErrorInBrowserConsole}
      `
      me.graph.designer?.save(() => notify(WorkflowDesignerConstants.SchemeSaved));
    };

    me.VueConfig.methods.undo = function () {
      me.graph.Undo();
    };

    me.VueConfig.methods.redo = function () {
      me.graph.Redo();
    };

    me.VueConfig.methods.copySelected = function () {
      me.graph.CopySelected();
    };

    me.VueConfig.methods.deleteSelected = function () {
      me.graph.DeleteSelected();
    };

    me.VueConfig.methods.showActors = function () {
      me.VueConfig.methods.showPropertyWindow('actors', 'WorkflowDesignerActors');
    };

    me.VueConfig.methods.showTimers = function () {
      me.VueConfig.methods.showPropertyWindow('timers', 'WorkflowDesignerTimers');
    };

    me.VueConfig.methods.showCommands = function () {
      me.VueConfig.methods.showPropertyWindow('commands', 'WorkflowDesignerCommands');
    };

    me.VueConfig.methods.showCodeActions = function () {
      me.VueConfig.methods.showPropertyWindow('codeactions', 'WorkflowDesignerCodeActions');
    };

    me.VueConfig.methods.showParameters = function () {
      me.VueConfig.methods.showPropertyWindow('parameters', 'WorkflowDesignerParameters');
    };
    me.VueConfig.methods.showAssignments = function () {
      me.VueConfig.methods.showPropertyWindow('assignments', 'WorkflowDesignerParameters');
    };

    me.VueConfig.methods.showLocalization = function () {
      me.VueConfig.methods.showPropertyWindow('localization', 'WorkflowDesignerLocalization');
    };

    me.VueConfig.methods.showProcessInfo = function () {
      me.VueConfig.methods.showPropertyWindow('processinfo', 'WorkflowDesignerProcessInfo');
    };

    me.VueConfig.methods.showLogs = function () {
      me.VueConfig.methods.showPropertyWindow('logs', 'WorkflowDesignerLogs');
    };

    me.VueConfig.methods.showLegend = function () {
      me.VueConfig.methods.showPropertyWindow('legend', 'WorkflowDesignerLegend');
    };

    me.VueConfig.methods.showElements = function () {
      me.VueConfig.methods.showPropertyWindow('elements', 'WorkflowDesignerElements');
    };

    me.VueConfig.methods.showLibrary = function () {
      me.VueConfig.methods.showPropertyWindow('library', 'WorkflowDesignerLibrary');
    };

    me.VueConfig.methods.setLanguage = designer.setLanguage;

    me.VueConfig.methods.onFullScreenClick = function () {
      me.graph.onFullScreenClick();
    };

    me.VueConfig.methods.showPropertyWindow = function (name, className) {
      if (!me[name]) {
        var options = {
          move: true,
          resize: true,
          savePosition: true,
          class: className,
          onClose: function () {
            me.graph.setParam(name, false);
            me.VueConfig.data[name] = false;
          }
        };
        me[name] = me.graph.CreateWindow(name, options);
      }

      if (me[name].isOpen)
        me[name].onClose();
      else {
        me[name].show(name);
        me.graph.setParam(name, true);
        me.VueConfig.data[name] = true;
      }
    };

    me.VueConfig.methods.inlinePress = function () {
      if (me.graph.data.CanBeInlined)
        me.graph.setInlinedFlag(false);
      else
        me.graph.setInlinedFlag(true);
    };

    me.VueConfig.methods.refresh = function () {
      me.graph.Refresh();
    };

    me.VueConfig.methods.autoArrangement = function () {
      me.graph.AutoArrangement();
    };

    me.VueConfig.methods.showExInfo = function () {
      var value = me.graph.getParam('exinfo');
      value = !value;
      me.graph.setParam('exinfo', value);
      me.graph.Draw();
    }

    me.VueConfig.methods.showInstanceInfo = function () {
      me.graph.designer?.getInstanceInfo(data => {
        console.info('Instance info', data)

        const {notify} = me.VueConfig.methods;
        navigator.clipboard.writeText(data).then(
          () => notify(me.VueConfig.data.labels.InformationCopiedToClipboardAndConsole),
          () => notify(me.VueConfig.data.labels.InformationLoggedToConsole)
        );
      })
    }
  }
</script>
