<template>
  <div class="c-data-table__actions-buttons">
    <el-button
      v-if="firstAction"
      :disabled="firstAction.disabled"
      class="u-mr1"
      size="mini"
      :icon="firstAction.icon"
      @click="$emit('command', firstAction)">
      {{ firstLabel }}
    </el-button>
    <el-button
      v-if="secondAction"
      :disabled="secondAction.disabled"
      class="u-ml0 u-mr1"
      size="mini"
      :icon="secondAction.icon"
      @click="$emit('command', secondAction)">
      {{ secondLabel }}
    </el-button>
    <el-data-table-actions-dropdown
      v-if="dropdownActions.length"
      :actions="dropdownActions"
      :selectedRows="selectedRows"
      @command="$emit('command', $event)">
    </el-data-table-actions-dropdown>
  </div>
</template>

<script>
import ElDataTableActionsDropdown from './DataTableActionsDropdown';

export default {
  name: 'ElDataTableActionButtons',
  components: {
    ElDataTableActionsDropdown
  },
  props: {
    actions: { type: Array, default: () => [] },
    selectedRowsCount: { type: Number },
    selectedRows: { type: Array, default: () => [] }
  },
  computed: {
    firstAction() {
      if (this.filteredActions) {
        return this.filteredActions[0];
      }
    },
    secondAction() {
      if (this.filteredActions) {
        return this.filteredActions[1];
      }
    },
    filteredActions() {
      return this.selectedRowsCount > 1 ? this.actions : this.actions.filter(action => action.type !== 'batch');
    },
    dropdownActions() {
      if (this.filteredActions) {
        return this.filteredActions.slice(2);
      }
    },
    firstLabel() {
      return this.actionLabel(this.firstAction);
    },
    secondLabel() {
      return this.actionLabel(this.secondAction);
    }
  },
  methods: {
    actionLabel(action) {
      if (action.label.constructor === Function) {
        return action.label(this.selectedRows);
      }
      return action.label;
    }
  }
};
</script>
