<script>
import { __, sprintf } from '~/locale';
import Flash from '~/flash';
import tooltip from '~/vue_shared/directives/tooltip';
import issuableMixin from '~/vue_shared/mixins/issuable';
import Icon from '~/vue_shared/components/icon.vue';
import eventHub from '~/sidebar/event_hub';
import editForm from './edit_form.vue';

export default {
  components: {
    editForm,
    Icon,
  },

  directives: {
    tooltip,
  },

  mixins: [issuableMixin],

  props: {
    isLocked: {
      required: true,
      type: Boolean,
    },

    isEditable: {
      required: true,
      type: Boolean,
    },

    mediator: {
      required: true,
      type: Object,
      validator(mediatorObject) {
        return mediatorObject.service && mediatorObject.service.update && mediatorObject.store;
      },
    },
  },

  computed: {
    lockIcon() {
      return this.isLocked ? 'lock' : 'lock-open';
    },

    isLockDialogOpen() {
      return this.mediator.store.isLockDialogOpen;
    },

    tooltipLabel() {
      return this.isLocked ? __('Locked') : __('Unlocked');
    },
  },

  created() {
    eventHub.$on('closeLockForm', this.toggleForm);
  },

  beforeDestroy() {
    eventHub.$off('closeLockForm', this.toggleForm);
  },

  methods: {
    toggleForm() {
      if (this.isEditable) {
        this.mediator.store.isLockDialogOpen = !this.mediator.store.isLockDialogOpen;
      }
    },
    updateLockedAttribute(locked) {
      this.mediator.service
        .update(this.issuableType, {
          discussion_locked: locked,
        })
        .then(() => window.location.reload())
        .catch(() =>
          Flash(
            sprintf(
              __(
                'Something went wrong trying to change the locked state of this %{issuableDisplayName}',
              ),
              {
                issuableDisplayName: this.issuableDisplayName,
              },
            ),
          ),
        );
    },
  },
};
</script>

<template>
  <div class="block issuable-sidebar-item lock">
    <div
      v-tooltip
      :title="tooltipLabel"
      class="sidebar-collapsed-icon"
      data-container="body"
      data-placement="left"
      data-boundary="viewport"
      @click="toggleForm"
    >
      <icon :name="lockIcon" class="sidebar-item-icon is-active" />
    </div>

    <div class="title hide-collapsed">
      {{ sprintf(__('Lock %{issuableDisplayName}'), { issuableDisplayName: issuableDisplayName }) }}
      <a
        v-if="isEditable"
        class="float-right lock-edit"
        href="#"
        data-track-event="click_edit_button"
        data-track-label="right_sidebar"
        data-track-property="lock_issue"
        @click.prevent="toggleForm"
      >
        {{ __('Edit') }}
      </a>
    </div>

    <div class="value sidebar-item-value hide-collapsed">
      <edit-form
        v-if="isLockDialogOpen"
        :is-locked="isLocked"
        :update-locked-attribute="updateLockedAttribute"
        :issuable-type="issuableType"
      />

      <div v-if="isLocked" class="value sidebar-item-value">
        <icon :size="16" name="lock" class="sidebar-item-icon inline is-active" />
        {{ __('Locked') }}
      </div>

      <div v-else class="no-value sidebar-item-value hide-collapsed">
        <icon :size="16" name="lock-open" class="sidebar-item-icon inline" /> {{ __('Unlocked') }}
      </div>
    </div>
  </div>
</template>
