<script>
import { __, sprintf } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import Pagination from './pagination.vue';
import DeleteButton from '../delete_button.vue';
import permissionsQuery from '../../graphql/queries/permissions.query.graphql';
import appDataQuery from '../../graphql/queries/appData.query.graphql';

export default {
  components: {
    Icon,
    Pagination,
    DeleteButton,
  },
  mixins: [timeagoMixin],
  props: {
    id: {
      type: String,
      required: true,
    },
    isDeleting: {
      type: Boolean,
      required: true,
    },
    name: {
      type: String,
      required: false,
      default: '',
    },
    updatedAt: {
      type: String,
      required: false,
      default: null,
    },
    updatedBy: {
      type: Object,
      required: false,
      default: () => ({}),
    },
    isLatestVersion: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      permissions: {
        createDesign: false,
      },
      projectPath: '',
      issueIid: null,
    };
  },
  apollo: {
    appData: {
      query: appDataQuery,
      manual: true,
      result({ data: { projectPath, issueIid } }) {
        this.projectPath = projectPath;
        this.issueIid = issueIid;
      },
    },
    permissions: {
      query: permissionsQuery,
      variables() {
        return {
          fullPath: this.projectPath,
          iid: this.issueIid,
        };
      },
      update: data => data.project.issue.userPermissions,
    },
  },
  computed: {
    updatedText() {
      return sprintf(__('Updated %{updated_at} by %{updated_by}'), {
        updated_at: this.timeFormated(this.updatedAt),
        updated_by: this.updatedBy.name,
      });
    },
    canDeleteDesign() {
      return this.permissions.createDesign;
    },
  },
};
</script>

<template>
  <header class="d-flex w-100 p-2 bg-white align-items-center js-design-header">
    <router-link
      :to="{
        name: 'designs',
        query: $route.query,
      }"
      :aria-label="s__('DesignManagement|Go back to designs')"
      class="mr-3 text-plain"
    >
      <icon :size="18" name="close" />
    </router-link>
    <div>
      <h2 class="m-0">{{ name }}</h2>
      <small v-if="updatedAt" class="text-secondary">{{ updatedText }}</small>
    </div>
    <pagination :id="id" class="ml-auto" />
    <delete-button
      v-if="isLatestVersion && canDeleteDesign"
      :is-deleting="isDeleting"
      button-variant="danger"
      @deleteSelectedDesigns="$emit('delete')"
    >
      <icon :size="18" name="remove" />
    </delete-button>
  </header>
</template>
