<script>
import { mapActions, mapState } from 'vuex';
import { GlTooltipDirective } from '@gitlab/ui';
import LoadingButton from '~/vue_shared/components/loading_button.vue';
import Icon from '~/vue_shared/components/icon.vue';

export default {
  name: 'SecurityDashboardActionButtons',
  components: {
    Icon,
    LoadingButton,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  props: {
    vulnerability: {
      type: Object,
      required: true,
    },
    canCreateIssue: {
      type: Boolean,
      required: false,
      default: false,
    },
    canDismissVulnerability: {
      type: Boolean,
      required: false,
      default: false,
    },
    isDismissed: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  computed: {
    ...mapState('vulnerabilities', ['isCreatingIssue', 'isDismissingVulnerability']),
  },
  methods: {
    ...mapActions('vulnerabilities', [
      'openModal',
      'createIssue',
      'dismissVulnerability',
      'undoDismiss',
    ]),
    handleCreateIssue() {
      const { vulnerability } = this;
      this.createIssue({ vulnerability, flashError: true });
    },
    handleDismissVulnerability() {
      const { vulnerability } = this;
      this.dismissVulnerability({ vulnerability, flashError: true });
    },
    handleUndoDismiss() {
      const { vulnerability } = this;
      this.undoDismiss({ vulnerability, flashError: true });
    },
  },
};
</script>

<template>
  <div class="btn-group">
    <button
      key="more-info"
      v-gl-tooltip
      :aria-label="s__('SecurityReports|More info')"
      :title="s__('SecurityReports|More info')"
      class="btn btn-inverted btn-info btn-secondary btn-border-color btn-icon js-more-info"
      type="button"
      @click="openModal({ vulnerability })"
    >
      <icon name="information-o" />
    </button>
    <loading-button
      v-if="canCreateIssue"
      key="create-issue"
      v-gl-tooltip
      :aria-label="s__('SecurityReports|Create issue')"
      :loading="isCreatingIssue"
      :title="s__('SecurityReports|Create issue')"
      container-class="btn btn-inverted btn-success btn-border-color js-create-issue"
      type="button"
      @click="handleCreateIssue"
    >
      <icon name="issue-new" />
    </loading-button>
    <template v-if="canDismissVulnerability">
      <loading-button
        v-if="isDismissed"
        key="undo-dismiss"
        v-gl-tooltip
        :aria-label="s__('SecurityReports|Undo dismiss')"
        :loading="isDismissingVulnerability"
        :title="s__('SecurityReports|Undo dismiss')"
        container-class="btn btn-inverted btn-warning btn-border-color js-undo-dismiss"
        type="button"
        @click="handleUndoDismiss"
      >
        <icon name="redo" />
      </loading-button>
      <loading-button
        v-else
        key="dismiss-vulnerability"
        v-gl-tooltip
        :aria-label="s__('SecurityReports|Dismiss vulnerability')"
        :loading="isDismissingVulnerability"
        :title="s__('SecurityReports|Dismiss vulnerability')"
        container-class="btn btn-inverted btn-warning btn-border-color js-dismiss-vulnerability"
        type="button"
        @click="handleDismissVulnerability"
      >
        <icon name="cancel" />
      </loading-button>
    </template>
  </div>
</template>
