<h3>{{ labels.Title }}</h3>
<el-form ref="form"
         :model="FormData"
         class="WorkflowDesignerWindowForm"
         label-position="top"
         label-width="150px">
  <div class="el-form--inline el-form--label-top SettingsWithPadding" style="display: flex;">
    <el-form-item v-if="expertMode" :label="labels.Name" :readonly="readonly" :rules="getFieldRules('Name')" prop="Name"
                  style="flex-grow: 1;">
      <el-input v-model="FormData.Name"></el-input>
    </el-form-item>
    <el-form-item v-if="expertMode" :label="labels.From" :readonly="readonly" :rules="getFieldRules('From')" prop="From">
      <el-select
        v-model="FormData.From"
        :disabled="readonly"
        filterable
        placeholder=""
        style="width: 100%;">
        <el-option v-for="item in activities" :key="item.Name" :label="item.Name" :value="item.Name"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-if="expertMode && isFromInline()" :label="labels.InlinedFinalActivityName" :readonly="readonly"
                  prop="InlinedFinalActivityName">
      <el-input v-model="FormData.InlinedFinalActivityName"></el-input>
    </el-form-item>

    <el-form-item v-if="expertMode" :label="labels.To" :readonly="readonly" :rules="getFieldRules('To')" prop="To">
      <el-select
        v-model="FormData.To"
        :disabled="readonly"
        filterable
        placeholder=""
        style="width: 100%;">
        <el-option v-for="item in activities" :key="item.Name" :label="item.Name" :value="item.Name"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item :label="labels.Classifier" :readonly="readonly" prop="Classifier">
      <el-button-group>
        <el-button v-for="key in Object.keys(labels.ClassifierValues)" :key="key"
                   :disabled="readonly"
                   :style="getClassifierStyle(FormData.Classifier, key)" @click="FormData.Classifier = key">
          {{ labels.ClassifierValues[key] }}
        </el-button>
      </el-button-group>
    </el-form-item>
  </div>

  <h4 class="SettingsHeader">{{ labels.Trigger }}</h4>
  <div class="SettingsWithPadding SpacedRow">
    <el-form-item :label="labels.TriggerType" style="flex-grow: 0;">
      <el-button-group>
        <el-button :disabled="readonly" :type="FormData.Trigger?.Type === 'Auto' ? 'info' : ''" @click="triggerClick('Auto')">
          {{ labels.TriggerAuto }}
        </el-button>
        <el-button :disabled="readonly" :type="FormData.Trigger?.Type === 'Command' ? 'info' : ''" @click="triggerClick('Command')">
          {{ labels.TriggerCommand }}
        </el-button>
        <el-button :disabled="readonly" :type="FormData.Trigger?.Type === 'Timer' ? 'info' : ''" @click="triggerClick('Timer')">
          {{ labels.TriggerTimer }}
        </el-button>
      </el-button-group>
    </el-form-item>
    <el-form-item v-if="FormData.Trigger?.Type === 'Command'" :label="labels.TriggerCommand" :rules="getFieldRules('Trigger.Command.Name')"
                  prop="Trigger.Command.Name">
      <div style="display:flex; flex-wrap: nowrap">
        <el-select
          v-model="FormData.Trigger.Command.Name"
          :disabled="readonly"
          allow-create
          clearable
          filterable
          placeholder=""
          style="width: 100%; margin-right: 10px;"
          @change="commandsListChange">
          <el-option v-for="item in commands" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-button :disabled="!FormData?.Trigger?.Command?.Name" class="WorkflowDesignerTableCodeParametersButton"
                   @click="commandParameters"></el-button>
      </div>
    </el-form-item>
    <el-form-item v-if="FormData.Trigger?.Type === 'Timer'" :label="labels.TriggerTimer" :rules="getFieldRules('Trigger.Timer.Name')"
                  prop="Trigger.Timer.Name">
      <div style="display:flex; flex-wrap: nowrap">
        <el-select
          v-model="FormData.Trigger.Timer.Name"
          :disabled="readonly"
          clearable
          filterable
          placeholder=""
          style="width: 100%; margin-right: 10px;">
          <el-option v-for="item in timers" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-button class="WorkflowDesignerTableCodeParametersButton" @click="timersWindow"></el-button>
      </div>
    </el-form-item>
  </div>


  <div v-if="FormData.Trigger?.Type === 'Command'" style="margin-bottom: 10px;">
    <h4 class="WorkflowDesignerTitleWithCreate Underline SettingsHeader">
      {{ labels.Restrictions }}
      <a v-if="!readonly"
         @click="addRow(FormData.Restrictions,
                { Actor: {}, Type: 'Allow'})">{{ ButtonTextCreate }}</a>
    </h4>
    <table v-if="FormData.Restrictions.length > 0" class="WorkflowDesignerTable">
      <tr>
        <th></th>
        <th>{{ labels.RestrictionsActor }}</th>
        <th>{{ labels.RestrictionsType }}</th>
      </tr>
      <tr v-for="(restriction, index) in FormData.Restrictions" :key="index"
          :class="dragOverIndex == index && dragOverBlock  == restriction ? 'dragOver' : ''"
          @dragend="dragend($event)"
          @dragover="dragover(restriction, index, $event)" @dragstart="dragstart(index, $event, FormData.Restrictions)">
        <td :draggable="!readonly" class='WorkflowDesignerTableMoveCol'>
          <div v-if="!readonly" class='WorkflowDesignerTableMoveButton'></div>
        </td>
        <td>
          <el-select
            v-model="restriction.Actor.Name"
            :class="validateField('Actor.Name', restriction) ? 'WorkflowDesignerInputError' : ''"
            :disabled="readonly"
            :title="validateField('Actor.Name', restriction)"
            clearable
            filterable
            placeholder=""
            style="width: 100%;">
            <el-option v-for="item in actors" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td>
          <el-select
            v-model="restriction.Type"
            :disabled="readonly"
            filterable
            placeholder="">
            <el-option key="Allow" :label="labels.Allow" value="Allow"></el-option>
            <el-option key="Restrict" :label="labels.Restrict" value="Restrict"></el-option>
          </el-select>
        </td>
        <td v-if="!readonly" style="width: 42px;">
          <el-button-group>
            <el-button class="WorkflowDesignerTableDeleteButton" @click="removeRow(FormData.Restrictions, index)"></el-button>
          </el-button-group>
        </td>
      </tr>
    </table>

    <el-button v-if="FormData.Restrictions.length > 1" text @click="restrictionDetails = !restrictionDetails">
      {{ restrictionDetails ? labels.HideConcatParameters :
        labels.ShowConcatParameters
        }}
    </el-button>

    <div v-if="restrictionDetails" class="el-form--inline el-form--label-top">
      <el-form-item :label="labels.AllowConcatenationType" :readonly="readonly">
        <el-select v-model="FormData.AllowConcatenationType">
          <el-option key="And" label="And" value="And"></el-option>
          <el-option key="Or" label="Or" value="Or"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="labels.RestrictConcatenationType" :readonly="readonly">
        <el-select v-model="FormData.RestrictConcatenationType">
          <el-option key="And" label="And" value="And"></el-option>
          <el-option key="Or" label="Or" value="Or"></el-option>
        </el-select>
      </el-form-item>
    </div>
  </div>

  <div style="margin-bottom: 10px;">
    <h4 class="WorkflowDesignerTitleWithCreate SettingsHeader">
      <span :style="showconditionerror ? 'color:red' : ''" :title="showconditionerror">{{ labels.Condition }}</span>
      <a v-if="!readonly && FormData.conditionType === 'Conditional'"
         @click="addRow(FormData.Conditions,
               {Action:{ActionParameter:''},Type: 'Expression', Expression:null})">{{ ButtonTextCreate }}</a>
    </h4>
    <el-form-item class="SettingsWithPadding" style="width: 380px;">
      <el-button-group>
        <el-button :disabled="readonly" :type="FormData.conditionType === 'Always' ? 'info' : ''" @click="conditionClick('Always')">
          {{ labels.AlwaysLabel }}
        </el-button>
        <el-button :disabled="readonly" :type="FormData.conditionType === 'Conditional' ? 'info' : ''"
                   @click="conditionClick('Conditional')">{{ labels.ConditionalLabel }} <img
          :src="ConditionalImage" style="height: 10px;" /></el-button>
        <el-button :disabled="readonly" :type="FormData.conditionType === 'Otherwise' ? 'info' : ''" @click="conditionClick('Otherwise')">
          {{ labels.OtherwiseLabel }} <img :src="OtherwiseImage"
                                           style="height: 10px;" />
        </el-button>
      </el-button-group>
    </el-form-item>
    <div v-if="FormData.conditionType === 'Conditional'">
      <table v-if="FormData.Conditions.length > 0" class="WorkflowDesignerTable">
        <tr>
          <th></th>
          <th>{{ labels.ConditionType }}</th>
          <th>{{ labels.ConditionAction }}</th>
          <th v-if="hasConditionAnyAction()">{{ labels.ConditionActionParameter }}</th>
          <th>{{ labels.ConditionInversion }}</th>
          <th v-if="expertMode">{{ labels.ResultOnPreExecution }}</th>
        </tr>
        <tr v-for="(condition, index) in FormData.Conditions" :key="index"
            :class="dragOverIndex == index && dragOverBlock  == condition ? 'dragOver' : ''"
            @dragend="dragend($event)" @dragover="dragover(condition, index, $event)"
            @dragstart="dragstart(index, $event, FormData.Conditions)">
          <td :draggable="!readonly" class='WorkflowDesignerTableMoveCol'>
            <div v-if="!readonly" class='WorkflowDesignerTableMoveButton'></div>
          </td>
          <td>
            <el-select
              v-model="condition.Type"
              :class="validateField('Type', condition) ? 'WorkflowDesignerInputError' : ''"
              :disabled="readonly"
              :title="validateField('Type', condition)"
              filterable
              placeholder=""
              style="width: 100%;">
              <el-option key="Action" :label="labels.ActionLabel" value="Action"></el-option>
              <el-option key="Expression" :label="labels.ExpressionLabel" value="Expression"></el-option>
            </el-select>
          </td>
          <td v-if="condition.Type === 'Action'">
            <el-select
              v-model="condition.Action.ActionName"
              :class="validateField('Action.ActionName', condition) ? 'WorkflowDesignerInputError' : ''"
              :disabled="readonly"
              :title="validateField('Action.ActionName', condition)"
              clearable
              filterable
              placeholder=""
              style="width: 100%;">
              <el-option v-for="item in conditions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </td>
          <td v-if="condition.Type === 'Action'">
            <div style="flex-flow: nowrap; display: flex;align-items: center;">
              <el-autocomplete v-model="condition.Action.ActionParameter" :disabled="readonly" :fetch-suggestions="querySearch"
                               style="margin-right: 5px;"
                               @focus="setCurrentItem(condition)"></el-autocomplete>
            </div>
          </td>
          <td v-if="condition.Type === 'Expression'">
            <div style="flex-flow: nowrap; display: flex;align-items: center;">
              <el-input
                v-model="condition.Expression"
                :class="validateField('Expression', condition) ? 'WorkflowDesignerInputError' : ''"
                :readonly="readonly"
                :title="validateField('Expression', condition)">
              </el-input>
            </div>
          </td>
          <td v-if="condition.Type === 'Expression' && hasConditionAnyAction()"></td>

          <td v-if="condition.Type === 'Action' || condition.Type === 'Expression'">
            <el-checkbox v-model="condition.ConditionInversion" :disabled="readonly"></el-checkbox>
          </td>
          <td v-if="expertMode && (condition.Type === 'Action' || condition.Type === 'Expression')">
            <el-select
              v-model="condition.ResultOnPreExecution"
              :disabled="readonly"
              clearable
              filterable
              placeholder=""
              style="width: 100%;">
              <el-option key="True" :value="true" label="True"></el-option>
              <el-option key="False" :value="false" label="False"></el-option>
            </el-select>
          </td>
          <td :style="!readonly ? 'width: 94px;' : 'width: 42px;'">
            <el-button-group>
              <el-button
                :class="'WorkflowDesignerTableCodeActionsButton ' + (editItem == condition ? 'is-active' : '')"
                @click="condition.Type === 'Action' ? showjson('Action.ActionParameter', condition, {name: condition.Action.ActionName ,type: ['Condition']}) : showjson('Expression', condition, {expression: true})"></el-button>
              <el-button v-if="!readonly" class="WorkflowDesignerTableDeleteButton"
                         @click="removeRow(FormData.Conditions, index)"></el-button>
            </el-button-group>
          </td>
        </tr>
      </table>

      <el-button v-if="FormData.Conditions.length > 1" text @click="conditionDetails = !conditionDetails">
        {{ conditionDetails ? labels.HideConcatParameters : labels.ShowConcatParameters
          }}
      </el-button>

      <div v-if="conditionDetails" class="el-form--inline el-form--label-top">
        <el-form-item :label="labels.ConditionsConcatenationType" :readonly="readonly">
          <el-select v-model="FormData.ConditionsConcatenationType">
            <el-option key="And" label="And" value="And"></el-option>
            <el-option key="Or" label="Or" value="Or"></el-option>
          </el-select>
        </el-form-item>
      </div>
    </div>
  </div>

  <div style="margin-bottom: 10px;">
    <h4 class="SettingsHeader">{{ labels.Subprocess }}</h4>
    <el-form-item class="SettingsWithPadding" style="width: 380px;">
      <el-button-group>
        <el-button :disabled="readonly" :style="!FormData.IsFork  ? getSubprocessStyle('None') : ''" @click="subprocessClick('None')">
          {{ labels.SubprocessNone }}
        </el-button>
        <el-button :disabled="readonly"
                   :style="FormData.IsFork && FormData.SubprocessInOutDefinition === 'Start'  ? getSubprocessStyle('Start') : ''"
                   @click="subprocessClick('Start')">{{ labels.SubprocessStart }}
        </el-button>
        <el-button :disabled="readonly"
                   :style="FormData.IsFork && FormData.SubprocessInOutDefinition === 'Finalize'  ? getSubprocessStyle('Finalize') : ''"
                   @click="subprocessClick('Finalize')">{{ labels.SubprocessFinalize }}
        </el-button>
        <el-button v-if="expertMode"
                   :disabled="readonly"
                   :style="FormData.IsFork && (!FormData.SubprocessInOutDefinition || FormData.SubprocessInOutDefinition === 'Auto')   ? getSubprocessStyle('Auto') : ''"
                   @click="subprocessClick('Auto')">{{ labels.SubprocessAuto }}
        </el-button>
      </el-button-group>
    </el-form-item>
  </div>
  <!--Subprocess start settings-->
  <h4 v-if="FormData.IsFork && FormData.SubprocessInOutDefinition === 'Auto'"
      class="SettingsHeader">{{ labels.SubprocessStartSettings }}</h4>
  <div v-if="FormData.IsFork && FormData.SubprocessInOutDefinition !== 'Finalize'" class="SettingsWithPadding" style="margin-bottom: 10px;">
    <div class="SpacedRow">
      <el-form-item v-if="expertMode" :label="labels.SubprocessName" :readonly="readonly" prop="SubprocessName">
        <el-input v-model="FormData.SubprocessName" :placeholder="labels.SubprocessNamePlaceholder"></el-input>
      </el-form-item>
      <el-form-item v-if="expertMode" :label="labels.SubprocessId" :readonly="readonly" prop="SubprocessId">
        <el-input v-model="FormData.SubprocessId" :placeholder="labels.SubprocessIdPlaceholder"></el-input>
      </el-form-item>
    </div>
    <div class="SpacedRow">
      <el-form-item v-if="FormData.Trigger?.Type === 'Auto' || FormData.Trigger?.Type === 'Command'" :label="labels.SubprocessStartupType"
                    :readonly="readonly">
        <el-select
          v-model="FormData.SubprocessStartupType"
          :disabled="readonly"
          :placeholder="labels.SubprocessStartupTypeSameThread" clearable
          filterable>
          <el-option key="SameThread" :label="labels.SubprocessStartupTypeSameThread" value="SameThread"></el-option>
          <el-option key="AnotherThread" :label="labels.SubprocessStartupTypeAnotherThread" value="AnotherThread"></el-option>
          <el-option key="TimerQueue" :label="labels.SubprocessStartupTypeTimerQueue" value="TimerQueue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="expertMode" :label="labels.SubprocessStartupParameterCopyStrategy" :readonly="readonly">
        <el-select
          v-model="FormData.SubprocessStartupParameterCopyStrategy"
          :disabled="readonly"
          :placeholder="labels.SubprocessStartupParameterCopyStrategyCopyAll" clearable
          filterable>
          <el-option key="CopyAll" :label="labels.SubprocessStartupParameterCopyStrategyCopyAll" value="CopyAll"></el-option>
          <el-option key="IgnoreAll" :label="labels.SubprocessStartupParameterCopyStrategyIgnoreAll" value="IgnoreAll"></el-option>
          <el-option key="CopySpecified" :label="labels.SubprocessStartupParameterCopyStrategyCopySpecified"
                     value="CopySpecified"></el-option>
          <el-option key="IgnoreSpecified" :label="labels.SubprocessStartupParameterCopyStrategyIgnoreSpecified"
                     value="IgnoreSpecified"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="(FormData.SubprocessStartupParameterCopyStrategy === 'CopySpecified' || FormData.SubprocessStartupParameterCopyStrategy === 'IgnoreSpecified') && expertMode"
        :label="labels.SubprocessSpecifiedParameters" :readonly="readonly">
        <el-input v-model="FormData.SubprocessSpecifiedParameters"></el-input>
      </el-form-item>
    </div>

    <el-form-item v-if="expertMode" :readonly="readonly">
      <el-checkbox v-model="FormData.DisableParentStateControl" :disabled="readonly" :label="labels.DisableParentStateControl"
                   name="type"></el-checkbox>
    </el-form-item>
  </div>
  <!--Subprocess finalize settings-->
  <h4 v-if="FormData.IsFork && FormData.SubprocessInOutDefinition === 'Auto'"
      class="SettingsHeader">{{ labels.SubprocessFinalizeSettings }}</h4>
  <div v-if="FormData.IsFork && FormData.SubprocessInOutDefinition !== 'Start'" class="SettingsWithPadding" style="margin-bottom: 10px;">
    <el-form-item v-if="expertMode" :label="labels.SubprocessFinalizeParameterMergeStrategy" :readonly="readonly">
      <el-select
        v-model="FormData.SubprocessFinalizeParameterMergeStrategy" :disabled="readonly"
        :placeholder="labels.SubprocessFinalizeParameterMergeStrategyOverwriteAllNulls"
        clearable
        dddd filterable
        style="width: 100%;">
        <el-option key="OverwriteAllNulls" :label="labels.SubprocessFinalizeParameterMergeStrategyOverwriteAllNulls"
                   value="OverwriteAllNulls"></el-option>
        <el-option key="OverwriteAll" :label="labels.SubprocessFinalizeParameterMergeStrategyOverwriteAll" value="OverwriteAll"></el-option>
        <el-option key="OverwriteSpecified" :label="labels.SubprocessFinalizeParameterMergeStrategyOverwriteSpecified"
                   value="OverwriteSpecified"></el-option>
        <el-option key="DontOverwriteSpecified" :label="labels.SubprocessFinalizeParameterMergeStrategyDontOverwriteSpecified"
                   value="DontOverwriteSpecified"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      v-if="(FormData.SubprocessFinalizeParameterMergeStrategy === 'OverwriteSpecified' || FormData.SubprocessFinalizeParameterMergeStrategy === 'DontOverwriteSpecified') && expertMode"
      :label="labels.SubprocessSpecifiedParameters" :readonly="readonly">
      <el-input v-model="FormData.SubprocessSpecifiedParameters"></el-input>
    </el-form-item>
    <el-checkbox v-model="FormData.MergeViaSetState" :disabled="readonly" :label="labels.MergeViaSetState" name="type"></el-checkbox>
  </div>


  <div v-if="expertMode" style="margin-bottom: 10px;">
    <h4 class="WorkflowDesignerTitleWithCreate Underline SettingsHeader">
      {{ labels.Annotations }}
      <a v-if="!readonly"
         @click="addRow(FormData.Annotations,{JsonValue:null})">{{ ButtonTextCreate }}</a>
    </h4>

    <table v-if="FormData.Annotations.length > 0" class="WorkflowDesignerTable">
      <tr>
        <th></th>
        <th>{{ labels.AnnotationName }}</th>
        <th>{{ labels.AnnotationValue }}</th>
      </tr>
      <tr v-for="(annotation, index) in FormData.Annotations" :key="index"
          :class="dragOverIndex == index && dragOverBlock  == annotation ? 'dragOver' : ''"
          @dragend="dragend($event)" @dragover="dragover(annotation, index, $event)"
          @dragstart="dragstart(index, $event, FormData.Annotations)">
        <td :draggable="!readonly" class='WorkflowDesignerTableMoveCol'>
          <div v-if="!readonly" class='WorkflowDesignerTableMoveButton'></div>
        </td>
        <td>

          <el-form-item :inline-message="true" :prop="'Annotations.' + index + '.Name'" :rules="annotationNameRules()" class="el-form-item"
                        style="flex-grow: 1;">
            <el-input
              v-model="annotation.Name"
              :class="validateField('Name', annotation) ? 'WorkflowDesignerInputError' : ''"
              :title="validateField('Name', annotation)">
            </el-input>
          </el-form-item>
        </td>
        <td>
          <el-input
            v-model="annotation.JsonValue">
          </el-input>
        </td>
        <td v-if="!readonly" class="WorkflowDesignerTableEditButtons Double">
          <el-button-group>
            <el-button :class="'WorkflowDesignerTableCodeActionsButton ' + (editItem == annotation ? 'is-active' : '')"
                       @click="showjson('JsonValue', annotation)"></el-button>
            <el-button class="WorkflowDesignerTableDeleteButton" @click="removeRow(FormData.Annotations, index)"></el-button>
          </el-button-group>
        </td>
      </tr>
    </table>
  </div>
  <div style="margin-bottom: 10px;">
    <el-button v-if="!readonly && !itemHasComment" circle @click="showUserComment()">
      <el-icon>
        <icon-comment />
      </el-icon>
    </el-button>
    <h4 v-if="itemHasComment" style="padding-bottom: 1px;border-bottom: 1px solid rgba(34,36,38,.15);">{{ labels.UserComment }}</h4>
    <el-input
      v-if="itemHasComment"
      v-model="FormData.UserComment"
      :placeholder="labels.UserComment"
      :rows="5"
      type="textarea"
    >
    </el-input>
  </div>
</el-form>

<div class="WorkflowDesignerButtons">
  <el-button text @click="expertMode = !expertMode">{{ expertMode ? SwitchToDefaultMode : SwitchToExpertMode }}</el-button>
  <el-button v-if="!readonly" type="primary" @click="onSave">{{ ButtonTextSave }}</el-button>
  <el-button @click="onClose">{{ ButtonTextCancel }}</el-button>
</div>
<script type="application/javascript">
  function transition_Data(me) {
    let gd = me?.graph?.data;

    return {
      readonly: false,
      showconditionerror: false,
      expertMode: false,
      restrictionDetails: false,
      conditionDetails: false,
      editItem: null,
      itemHasComment: false,
      FormData: {
        Trigger: {}
      },
      conditions: [],
      commands: [],
      timers: [],
      actors: [],
      activities: [],

      timersStore: gd?.Timers || {},
      commandsStore: gd?.Commands || {},
      conditionsStore: gd?.CodeActions || {},
      activitiesStore: gd?.Activities || {},
      actorsStore: gd?.Actors || {},
      // TODO move to icons
      ConditionalImage: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuNTg1NjMgMTQuNDAzOEw3LjU5MzA4IDEzLjg5NjVDNy42MDE3MyAxMy4zMDcxIDcuNjI3NzQgMTIuODEzIDcuNjcyOTcgMTIuNDE5QzcuNjcyOTkgMTIuNDE4OCA3LjY3MzAxIDEyLjQxODYgNy42NzMwMyAxMi40MTg0TDguMTY5NzcgMTIuNDc1NUM4LjIxMjQgMTIuMDk2MiA4LjMwMTk0IDExLjc1NzIgOC40MzgzNyAxMS40NTg2TDcuNTg1NjMgMTQuNDAzOFpNNy41ODU2MyAxNC40MDM4SDguMDkzMDJIMTAuNDU5M0gxMC45NTkzVjEzLjkwMzhDMTAuOTU5MyAxMy41OTc2IDEwLjk2NzYgMTMuMzMxMyAxMC45ODM2IDEzLjEwMzdMMTAuOTgzNyAxMy4xMDI2QzEwLjk5ODQgMTIuODg3OCAxMS4wMzQ2IDEyLjY5MjggMTEuMDkgMTIuNTE1OUMxMS4xNDI3IDEyLjM0NzQgMTEuMjIzMiAxMi4xNzY3IDExLjMzNTEgMTIuMDAzNE03LjU4NTYzIDE0LjQwMzhMMTEuMzM1MSAxMi4wMDM0TTExLjMzNTEgMTIuMDAzNEMxMS40NTE0IDExLjgzNjQgMTEuNjIwNCAxMS42NDY2IDExLjg1MTQgMTEuNDM0NUMxMi4yNTgyIDExLjA5MDIgMTIuNjY4MiAxMC43MTgzIDEzLjA4MTYgMTAuMzE5QzEzLjUyMDUgOS45MDM0MiAxMy45MTUzIDkuNDUzNDMgMTQuMjY1NiA4Ljk2OTE4QzE0LjYyMDYgOC40ODY0MiAxNC45MTI4IDcuOTcyMzIgMTUuMTQxMyA3LjQyNzM4TDE1LjE0MjQgNy40MjQ3OUMxNS4zODE2IDYuODQ1NDEgMTUuNSA2LjIzMTU5IDE1LjUgNS41ODc3NkMxNS41IDQuODA0NTYgMTUuMzY2NSA0LjA4ODgxIDE1LjA4NzEgMy40NTA0N0MxNC44MDkzIDIuODE1NzcgMTQuNDA0OCAyLjI3MzMxIDEzLjg3NyAxLjgyODIzQzEzLjM0ODIgMS4zODI0MyAxMi43MDk2IDEuMDU0NTEgMTEuOTczMiAwLjgzNjI3N0MxMS4yNDMgMC42MDkzMTEgMTAuNDI1MSAwLjUgOS41MjU1OCAwLjVDOC43MDY2OSAwLjUgNy45MzM3NCAwLjYwNjQxNyA3LjIwOTU0IDAuODIzMDk1QzYuNDkzNzcgMS4wMzE3MyA1Ljg2MTU4IDEuMzM5NjkgNS4zMjA5MyAxLjc1MjZMNS4zMjA5MyAxLjc1MjZMNS4zMjAxNSAxLjc1MzIxQzQuNzcwMTYgMi4xNzQ5OSA0LjMzMTA0IDIuNjg5MzcgNC4wMDcwMyAzLjI5MzY0QzMuNjc1MjkgMy45MTIzMSAzLjUwOTQ3IDQuNjAxODcgMy41MDAwNCA1LjM1MTQ4TDMuNDkzNjcgNS44NTc3N0g0SDYuMzY2MjhINi44NjYyOFY1LjM1Nzc3QzYuODY2MjggNS4wMTAwNyA2LjkzOTk0IDQuNzQzOTIgNy4wNjM2OCA0LjUzNzU5TDcuMDYzNzEgNC41Mzc2MUw3LjA2NjY2IDQuNTMyNTZDNy4yMDcxNSA0LjI5MTk3IDcuMzkzMzEgNC4wOTMwOSA3LjYzMDA1IDMuOTMyODJDNy44NjUyIDMuNzc1OTUgOC4xNDExNiAzLjY1NzA5IDguNDYzOTYgMy41ODA3Mkw4LjQ2Mzk3IDMuNTgwNzdMOC40NzExOSAzLjU3ODk1QzguODE0NCAzLjQ5MjMzIDkuMTY1NTMgMy40NDg4OSA5LjUyNTU4IDMuNDQ4ODlDMTAuMDA1NCAzLjQ0ODg5IDEwLjQxMjUgMy41MDg1NiAxMC43NTM3IDMuNjE4NDhDMTEuMDk0NSAzLjcyODI5IDExLjM1ODggMy44ODMyOSAxMS41NjEgNC4wNzQ2NUMxMS43MzkgNC4yNDMxOSAxMS44NzY4IDQuNDUzNzkgMTEuOTcxNSA0LjcxNjQzTDExLjk3NDIgNC43MjM3MkwxMS45NzcgNC43MzA5M0MxMi4wNzc0IDQuOTg0MjYgMTIuMTMzNyA1LjI5MTAxIDEyLjEzMzcgNS42NjAzOUMxMi4xMzM3IDUuOTk0NzUgMTIuMDY3MSA2LjMwODU2IDExLjkzNDEgNi42MDY2NEMxMS43ODg1IDYuOTMyOTggMTEuNjA0MyA3LjI0MjA2IDExLjM4MDUgNy41MzQyOEMxMS4xMzk2IDcuODQ1NzkgMTAuODc0MiA4LjE0MjcyIDEwLjU4MzkgOC40MjUwNEwxMC41ODM5IDguNDI1TDEwLjU3ODkgOC40Mjk5OUMxMC4yODU0IDguNzIzNjYgOS45OTYxIDkuMDA5MzggOS43MTEwNCA5LjI4NzE3QzkuMjgzNTkgOS42NTk3NyA4LjkzMjkyIDkuOTkxMDkgOC42NjM1MyAxMC4yNzk4TDExLjMzNTEgMTIuMDAzNFpNNy44MjA4NSAxOC45N0w3LjgyMDggMTguOTdMNy44MjY5NiAxOC45NzYyQzguMTk5MzggMTkuMzUzIDguNzE1MDEgMTkuNSA5LjI4MjU2IDE5LjVDOS44NDg1NCAxOS41IDEwLjM2MjkgMTkuMzUzOCAxMC43MzUxIDE4Ljk3OTRDMTEuMDg5MSAxOC42MzE3IDExLjI2NjMgMTguMTkxNCAxMS4yNjYzIDE3LjY5MjdDMTEuMjY2MyAxNy4xODQ1IDExLjA5MzggMTYuNzMzMyAxMC43NDA3IDE2LjM3NTNDMTAuMzY5MiAxNS45ODk1IDkuODUyODEgMTUuODM2OSA5LjI4MjU2IDE1LjgzNjlDOC43MTA3NyAxNS44MzY5IDguMTkzMDkgMTUuOTkwMyA3LjgyMTQzIDE2LjM3ODVMNy44MjEzNyAxNi4zNzg0TDcuODE1NDMgMTYuMzg0OEM3LjQ4MjI5IDE2Ljc0NTIgNy4zMjQ0MiAxNy4xOTMzIDcuMzI0NDIgMTcuNjkyN0M3LjMyNDQyIDE4LjE4MjEgNy40ODY0MiAxOC42MTk1IDcuODIwODUgMTguOTdaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJ3aGl0ZSIvPgo8L3N2Zz4K',
      OtherwiseImage: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjI2OTEgMTEuNzI1NUw1LjM3MDQ5IDEuMjA5MTgiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMyIvPgo8bGluZSB5MT0iLTEuNSIgeDI9IjIwIiB5Mj0iLTEuNSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEuMTUwNDdlLTA2IDEgLTEgLTMuMDY3MTFlLTA2IDEyLjE4OTQgMCkiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMyIvPgo8L3N2Zz4K'
    }
  }

  function transition_Init(me) {
    const {VueConfig} = me;
    const {state: data, methods} = VueConfig;
    const {FormData} = data;

    methods.UpdateLanguage = function () {
      Object.assign(data, {
        labels: WorkflowDesignerConstants.TransitionFormLabel,
        ButtonTextSave: WorkflowDesignerConstants.ButtonTextSave,
        ButtonTextCancel: WorkflowDesignerConstants.ButtonTextCancel,
        ButtonTextCreate: WorkflowDesignerConstants.ButtonTextCreate,
        ButtonTextDelete: WorkflowDesignerConstants.ButtonTextDelete,
        SwitchToDefaultMode: WorkflowDesignerConstants.SwitchToDefaultMode,
        SwitchToExpertMode: WorkflowDesignerConstants.SwitchToExpertMode,
      });
    }

    methods.UpdateLanguage();

    me.VueConfig.watch = {
      timersStore: function (val) {
        data.timers = me.graph.getTimerNames();
      },
      commandsStore: function (val) {
        data.commands = me.graph.getCommandNames();
      },
      conditionsStore: function (val) {
        data.conditions = me.graph.getConditionNames();
      },
      activitiesStore: function (val) {
        data.activities = me.graph.data.Activities;
      },
      actorsStore: function (val) {
        data.actors = me.graph.getActorNames();
      },
    };

    methods.onUpdate = function (item) {
      FormData.Name = item.Name;
      FormData.InlinedFinalActivityName = item.InlinedFinalActivityName;
      FormData.From = item.From.Name;
      FormData.To = item.To.Name;
      FormData.Classifier = item.Classifier;
      FormData.IsFork = item.IsFork;
      FormData.SubprocessInOutDefinition = item.SubprocessInOutDefinition;
      FormData.SubprocessName = item.SubprocessName;
      FormData.SubprocessId = item.SubprocessId;
      FormData.SubprocessStartupType = item.SubprocessStartupType;
      FormData.SubprocessStartupParameterCopyStrategy = item.SubprocessStartupParameterCopyStrategy;
      FormData.SubprocessFinalizeParameterMergeStrategy = item.SubprocessFinalizeParameterMergeStrategy;
      FormData.SubprocessSpecifiedParameters = item.SubprocessSpecifiedParameters;
      FormData.MergeViaSetState = item.MergeViaSetState;
      FormData.DisableParentStateControl = item.DisableParentStateControl;
      FormData.ConditionsConcatenationType = item.ConditionsConcatenationType;
      FormData.UserComment = item.UserComment;
      data.conditionDetails = FormData.ConditionsConcatenationType === 'Or';

      FormData.AllowConcatenationType = item.AllowConcatenationType;
      FormData.RestrictConcatenationType = item.RestrictConcatenationType;
      data.restrictionDetails = FormData.AllowConcatenationType === 'Or' || FormData.RestrictConcatenationType === 'Or';

      FormData.Annotations = Array.isArray(item.Annotations) ? WorkflowDesignerCommon.clone(item.Annotations) : [];
      FormData.Conditions = Array.isArray(item.Conditions) ? WorkflowDesignerCommon.clone(item.Conditions) : [];
      FormData.Conditions.forEach(function (condition) {
        if (!condition.Action)
          condition.Action = {};
      });
      FormData.Restrictions = Array.isArray(item.Restrictions) ? WorkflowDesignerCommon.clone(item.Restrictions) : [];
      FormData.Trigger = {...FormData.Trigger, ...WorkflowDesignerCommon.clone(item.Trigger)};

      if (!FormData.Trigger.Timer) FormData.Trigger.Timer = {};
      if (!FormData.Trigger.Command) FormData.Trigger.Command = {};

      FormData.Restrictions.forEach(function (item) {
        if (!item.Actor) item.Actor = {};
      });

      me.linkItem = item;
      data.prevName = item.Name;
      data.readonly = me.graph.Settings.readonly;
      data.itemHasComment = FormData.UserComment != null && FormData.UserComment.length > 0;

      data.conditions = me.graph.getConditionNames();
      data.timers = me.graph.getTimerNames();
      data.commands = me.graph.getCommandNames();
      data.actors = me.graph.getActorNames();

      data.activities = me.graph.data.Activities;

      if (FormData.Annotations.length > 0)
        data.expertMode = true;

      if (FormData.IsFork && (!FormData.SubprocessInOutDefinition || FormData.SubprocessInOutDefinition === 'Auto'))
        data.expertMode = true;

      if (FormData.SubprocessId !== null && FormData.SubprocessId !== undefined && FormData.SubprocessId !== '') {
        data.expertMode = true;
      }

      if (FormData.SubprocessName !== null && FormData.SubprocessName !== undefined && FormData.SubprocessName !== '' && FormData.SubprocessName !== FormData.Name) {
        data.expertMode = true;
      }

      if (FormData.SubprocessStartupParameterCopyStrategy !== null && FormData.SubprocessStartupParameterCopyStrategy !== undefined
        && FormData.SubprocessStartupParameterCopyStrategy !== '' && FormData.SubprocessStartupParameterCopyStrategy !== 'CopyAll') {
        data.expertMode = true;
      }

      if (FormData.SubprocessFinalizeParameterMergeStrategy !== null && FormData.SubprocessFinalizeParameterMergeStrategy !== undefined
        && FormData.SubprocessFinalizeParameterMergeStrategy !== '' && FormData.SubprocessFinalizeParameterMergeStrategy !== 'OverwriteAllNulls') {
        data.expertMode = true;
      }

      if (FormData.DisableParentStateControl) {
        data.expertMode = true;
      }

      function findInObj(obj, func) {
        for (var i = 0; i < obj.length; ++i) {
          if (func(obj[i])) return true;
        }

        return false;
      }

      if (findInObj(FormData.Conditions, function (item) {
        return item.ResultOnPreExecution !== undefined && item.ResultOnPreExecution !== null;
      })) {
        data.expertMode = true;
      }

      if (FormData.InlinedFinalActivityName) {
        data.expertMode = true;
      }

      if (FormData.Conditions.length === 1 && FormData.Conditions[0].Type === 'Always') {
        FormData.conditionType = 'Always';
      } else if (FormData.Conditions.length === 1 && FormData.Conditions[0].Type === 'Otherwise') {
        FormData.conditionType = 'Otherwise';
      } else {
        FormData.conditionType = 'Conditional';
      }

      data.originalItem = WorkflowDesignerCommon.clone(FormData);
    };

    methods.isFromInline = function () {
      var from = FormData.From;
      var activities = data.activities;
      return activities.filter(function (a) {
        return a.Name == from && a.ActivityType === 'Inline';
      }).length > 0;
    };

    methods.triggerClick = function (type) {
      FormData.Trigger.Type = type;
      FormData.Timer = {};
      FormData.Command = {};
      FormData.Restrictions = [];
      if (type === 'Timer') {
        FormData.SubprocessStartupType = undefined;
      }
    };

    methods.subprocessClick = function (type) {
      switch (type) {
        case 'None':
          FormData.IsFork = false;
          FormData.SubprocessInOutDefinition = undefined;
          break;
        case 'Start':
          FormData.IsFork = true;
          FormData.SubprocessInOutDefinition = 'Start';
          break;
        case 'Finalize':
          FormData.IsFork = true;
          FormData.SubprocessInOutDefinition = 'Finalize';
          break;
        case 'Auto':
          FormData.IsFork = true;
          FormData.SubprocessInOutDefinition = 'Auto';
          break;
        default:
          FormData.IsFork = false;
          FormData.SubprocessInOutDefinition = undefined;
          break;
      }
    };

    methods.getSubprocessStyle = function (type) {
      switch (type) {
        case 'None':
          return 'background-color:#CCCCCC;color:white;';
        case 'Start':
          return 'background-color:#27AE60;color:white;';
        case 'Finalize':
          return 'background-color:#2980B9;color:white;';
        case 'Auto':
          return 'background-color:#7F8C8D;color:white;';
        default:
          return 'background-color:#CCCCCC;color:white;';
      }
    };

    methods.conditionClick = function (type) {
      FormData.conditionType = type;

      var conditions = FormData.Conditions;
      conditions.splice(0, conditions.length);
      if (type === 'Always') {
        conditions.push({Type: 'Always', Action: {}});
      } else if (type === 'Otherwise') {
        conditions.push({Type: 'Otherwise', Action: {}});
      } else if (type === 'Conditional') {
        conditions.push({Type: 'Expression', Expression: null, Action: {ActionParameter: null}});
      }
    };

    methods.commandParameters = function () {
      var windowId = me.id + '_commandParameters';
      // var name = FormData.Trigger.Command.Name;

      var item = me.getCommandItem(FormData.Trigger.Command.Name);
      if (!item) return;

      if (!me.parametersform) {
        var options = {
          move: true,
          resize: true,
          savePosition: true,
          class: 'WorkflowDesignerParametersForm',
          parameterDefinition: {}
        };
        me.parametersform = me.graph.CreateWindow(windowId, options);
      }

      me.parametersform.show('commandParameters', item);
    };

    me.getCommandItem = function (commandName) {
      return me.graph.data.Commands.find(function (command) {
        return command.Name === commandName;
      });
    };

    methods.commandsListChange = function (commandName) {
      if (!me.getCommandItem(commandName)) {
        me.graph.data.Commands.push({Name: commandName, InputParameters: []});
      }
    };

    methods.timersWindow = function () {
      var windowId = me.id + '_timers';

      if (!me.parametersform) {
        var options = {
          move: true,
          resize: true,
          savePosition: true,
          class: 'WorkflowDesignerParametersForm',
          parameterDefinition: {}
        };
        me.parametersform = me.graph.CreateWindow(windowId, options);
      }

      me.parametersform.show('timers');
    };

    methods.showUserComment = function () {
      data.itemHasComment = true;
    };

    methods.hasConditionAnyAction = function () {
      var result = false;
      for (var i = 0; i < FormData.Conditions.length; i++) {
        if (FormData.Conditions[i].Type === 'Action') {
          result = true;
          break;
        }
      }
      return result;
    };

    methods.getClassifierStyle = function (classifier, type) {
      if (classifier != type) {
        return '';
      }
      if (classifier == WorkflowDesignerConstants.NotSpecified) {
        return 'background-color:#7F8C8D;color:white;';
      } else if (classifier === 'Direct') {
        return 'background-color:#27AE60;color:white;';
      } else if (classifier === 'Reverse') {
        return 'background-color:#2980B9;color:white;';
      }
    };

    methods.setCurrentItem = function (item) {
      this.currentItem = item;
    };
    methods.querySearch = function (queryString, cb) {
      if (data.readonly)
        return cb([]);

      var res = me.graph.getAutoCompleteSuggestions2('conditionparameter', this.currentItem.Action.ActionName, queryString);
      cb(res);
    };

    methods.getFieldRules = function (field) {
      var res = [{required: true, message: WorkflowDesignerConstants.FieldIsRequired, trigger: 'blur'}];

      if (field === 'Name') {
        var validator = function (rule, value, callback) {
          var isValid = true;
          me.graph.data.Transitions.forEach(function (a) {
            if (a != me.linkItem && a.Name == value) {
              isValid = false;
            }
          });

          if (isValid) {
            callback();
          } else {
            callback(new Error(rule.message));
          }
        };
        res.push({validator: validator, message: WorkflowDesignerConstants.FieldMustBeUnique});
      }
      return res;
    };

    methods.showjson = function (name, item, params) {
      data.editItem = item;
      me.editItem = item;

      var onSuccess = function (value) {
        if (me.editItem) {
          WorkflowDesignerCommon.setValueByPropertyName(me.editItem, name, value);
          data.editItem = undefined;
          delete me.editItem;
        }
      };

      var onClose = function (value) {
        data.editItem = undefined;
      };

      var value = WorkflowDesignerCommon.getValueByPropertyName(item, name);
      data.jsonform = me.showjson(value, params, onSuccess, onClose);
    };

    methods.addRow = function (items, def) {
      items.push(def ? def : {});
    };

    methods.removeRow = function (items, index) {
      items.splice(index, 1);
    };

    methods.validateField = function (name, item) {
      if (name != 'Name' && name != 'Actor.Name' && name != 'Type' && name != 'Action.ActionName' && name != 'Expression')
        return;

      if (!WorkflowDesignerCommon.getValueByPropertyName(item, name)) {
        return WorkflowDesignerConstants.FieldIsRequired;
      }

      if (name === 'Type') {
        var conditions = FormData.Conditions;
        var labels = data.labels;
        if (item.Type === 'Always' && conditions.filter(function (c) {
          return c.Type == item.Type;
        }).length > 1) {
          return labels.AlwaysConditionShouldBeSingle;
        }

        if (item.Type === 'Otherwise' && conditions.filter(function (c) {
          return c.Type == item.Type;
        }).length > 1) {
          return labels.OtherwiseConditionShouldBeSingle;
        }
      }
    };

    methods.validate = function () {
      var validateFunc = methods.validateField;

      for (var i = 0; i < FormData.Restrictions.length; i++) {
        var item = FormData.Restrictions[i];
        if (validateFunc('Actor.Name', item))
          return false;
      }

      if (Array.isArray(FormData.Conditions) && FormData.Conditions.length === 0) {
        FormData.showconditionerror = WorkflowDesignerConstants.TransitionFormLabel.ConditionsListShouldNotBeEmpty;
        return false;
      }

      for (var i = 0; i < FormData.Conditions.length; i++) {
        var item = FormData.Conditions[i];
        if (validateFunc('Type', item) ||
          (item.Type === 'Action' && validateFunc('Action.ActionName', item)) ||
          (item.Type === 'Expression' && validateFunc('Expression', item)))
          return false;
      }

      for (var i = 0; i < FormData.Annotations.length; i++) {
        var item = FormData.Annotations[i];
        if (validateFunc('Name', item))
          return false;
      }

      return true;
    };

    methods.onSave = function () {
      if (this.$refs && this.$refs.form && methods.validate()) {
        this.$refs.form.validate(function (valid) {
          if (valid) {
            me.onSuccess(FormData);
            me.onClose(true);
          }
        });

      }
    };

    methods.onClose = function () {
      if (data.readonly) {
        me.onClose(true);
        return;
      }

      var originalItem = data.originalItem;
      var item = FormData;

      if (WorkflowDesignerCommon.deepCompare(originalItem, item)) {
        me.onClose(true);
      } else {
        me.showConfirm();
        return false;
      }
    };

    methods.onCloseSave = function () {
      me.onClose(true);
    };

    me.showConfirm = function () {
      methods.showConfirm({
        title: WorkflowDesignerConstants.DialogConfirmText,
        message: WorkflowDesignerConstants.CloseWithoutSaving,
        onSuccess: function () {
          methods.onCloseSave();
        }
      });
    };
  }
</script>
