<div class="WorkflowDesignerToolbarBlock Horizontal WorkflowDesignerElementToolbarBlock" style="display: flex;">
  <el-tooltip v-if="!graph.Settings.notshowwindows" :content="labels.ShowProperties">
    <div class="WorkflowDesignerElementToolbarIconContainer">
      <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon" @click="activity.ShowProperties()">
        <el-icon>
          <div v-html="icons.showproperties"></div>
        </el-icon>
      </el-button>
    </div>
  </el-tooltip>
  <el-tooltip v-if="!graph.Settings.readonly" :content="labels.CreateTransition">
    <div class="WorkflowDesignerElementToolbarIconContainer">
      <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon" :disabled="isTransitionPrevented" @click="createTransition">
        <el-icon>
          <div v-html="icons.createtransition"></div>
        </el-icon>
      </el-button>

    </div>
  </el-tooltip>
  <el-tooltip v-if="!graph.Settings.readonly" :content="labels.CreateTransitionAndActivity">
    <div class="WorkflowDesignerElementToolbarIconContainer">
      <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon" :disabled="isTransitionPrevented" @click="createTransitionAndActivity">
        <el-icon>
          <div v-html="icons.createtransitionandactivity"></div>
        </el-icon>
      </el-button>
    </div>
  </el-tooltip>
  <el-tooltip v-if="!graph.Settings.readonly" :content="labels.Clone">
    <div class="WorkflowDesignerElementToolbarIconContainer">
      <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon" @click="activity.Clone()">
        <el-icon>
          <div v-html="icons.clone"></div>
        </el-icon>
      </el-button>
    </div>
  </el-tooltip>
  <div v-if="!graph.Settings.readonly" class="WorkflowDesignerElementToolbarIconContainer">
    <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon">
      <el-icon>
        <div v-html="icons.color"></div>
      </el-icon>
    </el-button>
  </div>
  <el-tooltip v-if="!graph.Settings.readonly" :content="labels.Color">
    <div>
      <el-color-picker v-if="!graph.Settings.readonly" v-model="Color" class="ColorPicker" :predefine="predefineColors" size="small"
                       @change="activity.UpdateColor(Color)"></el-color-picker>
    </div>
  </el-tooltip>
  <el-tooltip v-if="!graph.Settings.readonly" :content="labels.Delete">
    <div class="WorkflowDesignerElementToolbarIconContainer">
      <el-button class="WorkflowDesignerElementToolbarIcon WorkflowDesignerToolbarIcon" @click="activity._onDelete()">
        <el-icon>
          <div v-html="icons.delete"></div>
        </el-icon>
      </el-button>
    </div>
  </el-tooltip>
</div>
<script type="application/javascript">
  function activitytoolbar_Data(me) {
    return {
      icons: WorkflowDesignerConstants.icons,
      activity: undefined,
      Color: '',
      readonly: false,
      isTransitionPrevented: false,
      predefineColors: [
        '#f44336',
        '#e91e63',
        '#9c27b0',
        '#673ab7',
        '#3f51b5',
        '#2196f3',
        '#03a9f4',
        '#00bcd4',
        '#009688',
        '#4caf50',
        '#8bc34a',
        '#cddc39',
        '#ffeb3b',
        '#ffc107',
        '#ff9800',
        '#ff5722',
        '#795548',
        '#9e9e9e',
        '#607d8b'
      ],
      graph: me.value.graph
    }
  }

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

    methods.UpdateLanguage = function () {
      Object.assign(data, {
        labels: {
          ...WorkflowDesignerConstants.ElementToolbar,
          ...WorkflowDesignerConstants.ActivityToolbar
        },
      });
    }

    methods.UpdateLanguage();

    methods.onUpdate = function (activity) {
      data.activity = activity;
      data.Color = activity.Color;
      data.isTransitionPrevented = data?.activity?.preventMakeNewTransition?.();
    };

    methods.createTransition = () => {
      data.activity._onCreateTransition();
      data.isTransitionPrevented = data.activity?.preventMakeNewTransition?.();
    }

    methods.createTransitionAndActivity = () => {
      data.activity._onCreateTransitionAndActivity();
      data.isTransitionPrevented = data.activity?.preventMakeNewTransition?.();
    }

  }
</script>
