<script>
import { __ } from '../../../locale';
import eventHub from '../../event_hub';
import loadingButton from '../../../vue_shared/components/loading_button.vue';

export default {
  props: {
    loading: {
      type: Boolean,
      required: false,
      default: false,
    },
    subscribed: {
      type: Boolean,
      required: false,
    },
    id: {
      type: Number,
      required: false,
    },
  },
  components: {
    loadingButton,
  },
  computed: {
    buttonLabel() {
      let label;
      if (this.subscribed === false) {
        label = __('Subscribe');
      } else if (this.subscribed === true) {
        label = __('Unsubscribe');
      }

      return label;
    },
  },
  methods: {
    toggleSubscription() {
      eventHub.$emit('toggleSubscription', this.id);
    },
  },
};
</script>

<template>
  <div>
    <div class="sidebar-collapsed-icon">
      <i
        class="fa fa-rss"
        aria-hidden="true">
      </i>
    </div>
    <span class="issuable-header-text hide-collapsed pull-left">
      {{ __('Notifications') }}
    </span>
    <loading-button
      ref="loadingButton"
      class="btn btn-default pull-right hide-collapsed js-issuable-subscribe-button"
      :loading="loading"
      :label="buttonLabel"
      @click="toggleSubscription"
    />
  </div>
</template>