<script>
import { GlPopover, GlLink, GlAvatar, GlButton, GlTooltipDirective } from '@gitlab/ui';
import timeagoMixin from '~/vue_shared/mixins/timeago';

import RequirementStatusBadge from './requirement_status_badge.vue';

import RequirementMeta from '../mixins/requirement_meta';
import { FilterState } from '../constants';

export default {
  components: {
    GlPopover,
    GlLink,
    GlAvatar,
    GlButton,
    RequirementStatusBadge,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  mixins: [RequirementMeta, timeagoMixin],
  props: {
    requirement: {
      type: Object,
      required: true,
      validator: value =>
        [
          'iid',
          'state',
          'userPermissions',
          'title',
          'createdAt',
          'updatedAt',
          'author',
          'testReports',
        ].every(prop => value[prop]),
    },
    stateChangeRequestActive: {
      type: Boolean,
      required: false,
      default: false,
    },
    active: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  computed: {
    showIssuableMetaActions() {
      return Boolean(this.canUpdate || this.canArchive || this.testReport);
    },
  },
  methods: {
    /**
     * This is needed as an independent method since
     * when user changes current page, `$refs.authorLink`
     * will be null until next page results are loaded & rendered.
     */
    getAuthorPopoverTarget() {
      if (this.$refs.authorLink) {
        return this.$refs.authorLink.$el;
      }
      return '';
    },
    handleArchiveClick() {
      this.$emit('archiveClick', {
        iid: this.requirement.iid,
        state: FilterState.archived,
      });
    },
    handleReopenClick() {
      this.$emit('reopenClick', {
        iid: this.requirement.iid,
        state: FilterState.opened,
      });
    },
  },
};
</script>

<template>
  <li
    class="issue requirement gl-cursor-pointer"
    :class="{ 'disabled-content': stateChangeRequestActive, 'gl-bg-blue-50': active }"
    @click="$emit('show-click', requirement)"
  >
    <div class="issue-box">
      <div class="issuable-info-container">
        <span class="issuable-reference text-muted d-none d-sm-block mr-2">{{ reference }}</span>
        <div class="issuable-main-info">
          <span class="issuable-reference text-muted d-block d-sm-none">{{ reference }}</span>
          <div class="issue-title title">
            <span class="issue-title-text">{{ requirement.title }}</span>
          </div>
          <div class="issuable-info d-none d-sm-inline-block">
            <span class="issuable-authored">
              <span
                v-gl-tooltip:tooltipcontainer.bottom
                :title="tooltipTitle(requirement.createdAt)"
                >{{ createdAtFormatted }}</span
              >
              {{ __('by') }}
              <gl-link ref="authorLink" class="author-link js-user-link" :href="author.webUrl">
                <span class="author">{{ author.name }}</span>
              </gl-link>
            </span>
            <span
              v-gl-tooltip:tooltipcontainer.bottom
              :title="tooltipTitle(requirement.updatedAt)"
              class="issuable-updated-at"
              >&middot; {{ updatedAtFormatted }}</span
            >
          </div>
          <requirement-status-badge
            v-if="testReport"
            :test-report="testReport"
            :last-test-report-manually-created="requirement.lastTestReportManuallyCreated"
            class="d-block d-sm-none"
          />
        </div>
        <div class="d-flex">
          <ul v-if="showIssuableMetaActions" class="controls flex-column flex-sm-row">
            <requirement-status-badge
              v-if="testReport"
              :test-report="testReport"
              :last-test-report-manually-created="requirement.lastTestReportManuallyCreated"
              element-type="li"
              class="d-none d-sm-block"
            />
            <li v-if="canUpdate && !isArchived" class="requirement-edit d-sm-block">
              <gl-button
                v-gl-tooltip
                icon="pencil"
                :title="__('Edit')"
                @click="$emit('edit-click', requirement)"
              />
            </li>
            <li v-if="canArchive && !isArchived" class="requirement-archive d-sm-block">
              <gl-button
                v-if="!stateChangeRequestActive"
                v-gl-tooltip
                icon="archive"
                :loading="stateChangeRequestActive"
                :title="__('Archive')"
                @click.stop="handleArchiveClick"
              />
            </li>
            <li v-if="canArchive && isArchived" class="requirement-reopen d-sm-block">
              <gl-button :loading="stateChangeRequestActive" @click="handleReopenClick">{{
                __('Reopen')
              }}</gl-button>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <gl-popover :target="getAuthorPopoverTarget()" triggers="hover focus" placement="top">
      <div class="gl-line-height-normal gl-display-flex">
        <div class="gl-p-2 gl-flex-shrink-1">
          <gl-avatar :entity-name="author.name" :alt="author.name" :src="author.avatarUrl" />
        </div>
        <div class="gl-p-2 gl-w-full">
          <h5 class="gl-m-0">{{ author.name }}</h5>
          <div class="gl-text-gray-500 gl-mb-3">@{{ author.username }}</div>
        </div>
      </div>
    </gl-popover>
  </li>
</template>
