<script>
import { GlIcon } from '@gitlab/ui';
import tooltip from '~/vue_shared/directives/tooltip';
import { sprintf, n__, __ } from '~/locale';

export default {
  components: {
    GlIcon,
  },
  directives: {
    tooltip,
  },
  props: {
    files: {
      type: Array,
      required: true,
    },
    iconName: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
  },
  computed: {
    addedFilesLength() {
      return this.files.filter(f => f.tempFile).length;
    },
    modifiedFilesLength() {
      return this.files.filter(f => !f.tempFile).length;
    },
    addedFilesIconClass() {
      return this.addedFilesLength ? 'multi-file-addition' : '';
    },
    modifiedFilesClass() {
      return this.modifiedFilesLength ? 'multi-file-modified' : '';
    },
    additionsTooltip() {
      return sprintf(
        n__('1 %{type} addition', '%{count} %{type} additions', this.addedFilesLength),
        {
          type: this.title.toLowerCase(),
          count: this.addedFilesLength,
        },
      );
    },
    modifiedTooltip() {
      return sprintf(
        n__('1 %{type} modification', '%{count} %{type} modifications', this.modifiedFilesLength),
        {
          type: this.title.toLowerCase(),
          count: this.modifiedFilesLength,
        },
      );
    },
    titleTooltip() {
      return sprintf(__('%{title} changes'), { title: this.title });
    },
    additionIconName() {
      return this.title.toLowerCase() === 'staged' ? 'file-addition-solid' : 'file-addition';
    },
    modifiedIconName() {
      return this.title.toLowerCase() === 'staged' ? 'file-modified-solid' : 'file-modified';
    },
  },
};
</script>

<template>
  <div class="multi-file-commit-list-collapsed text-center">
    <div
      v-tooltip
      :title="titleTooltip"
      data-container="body"
      data-placement="left"
      class="gl-mb-5"
    >
      <gl-icon v-once :name="iconName" :size="18" />
    </div>
    <div
      v-tooltip
      :title="additionsTooltip"
      data-container="body"
      data-placement="left"
      class="gl-mb-3"
    >
      <gl-icon :name="additionIconName" :size="18" :class="addedFilesIconClass" />
    </div>
    {{ addedFilesLength }}
    <div
      v-tooltip
      :title="modifiedTooltip"
      data-container="body"
      data-placement="left"
      class="gl-mt-3 gl-mb-3"
    >
      <gl-icon :name="modifiedIconName" :size="18" :class="modifiedFilesClass" />
    </div>
    {{ modifiedFilesLength }}
  </div>
</template>
