<script>
import { mapActions, mapState } from 'vuex';
import { GlTooltipDirective, GlButton } from '@gitlab/ui';
import { s__ } from '~/locale';

export default {
  name: 'SecurityDashboardActionButtons',
  components: {
    GlButton,
  },
  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 });
    },
  },
  i18n: {
    moreInfo: s__('SecurityReports|More info'),
    createIssue: s__('SecurityReports|Create issue'),
    undoDismiss: s__('SecurityReports|Undo dismiss'),
    dismissVulnerability: s__('SecurityReports|Dismiss vulnerability'),
  },
};
</script>

<template>
  <div class="btn-group">
    <gl-button
      key="more-info"
      v-gl-tooltip
      :aria-label="$options.i18n.moreInfo"
      :title="$options.i18n.moreInfo"
      class="js-more-info"
      variant="info"
      category="secondary"
      icon="information-o"
      @click="openModal({ vulnerability })"
    />
    <gl-button
      v-if="canCreateIssue"
      key="create-issue"
      v-gl-tooltip
      :aria-label="$options.i18n.createIssue"
      :loading="isCreatingIssue"
      :title="$options.i18n.createIssue"
      class="js-create-issue"
      variant="success"
      category="secondary"
      icon="issue-new"
      @click="handleCreateIssue"
    />
    <template v-if="canDismissVulnerability">
      <gl-button
        v-if="isDismissed"
        key="undo-dismiss"
        v-gl-tooltip
        :aria-label="$options.i18n.undoDismiss"
        :loading="isDismissingVulnerability"
        :title="$options.i18n.undoDismiss"
        class="js-undo-dismiss"
        variant="warning"
        category="secondary"
        icon="redo"
        @click="handleUndoDismiss"
      />
      <gl-button
        v-else
        key="dismiss-vulnerability"
        v-gl-tooltip
        :aria-label="$options.i18n.dismissVulnerability"
        :loading="isDismissingVulnerability"
        :title="$options.i18n.dismissVulnerability"
        class="js-dismiss-vulnerability"
        variant="warning"
        category="secondary"
        icon="cancel"
        @click="handleDismissVulnerability"
      />
    </template>
  </div>
</template>
