<script>
import { GlIcon, GlLink, GlTooltipDirective } from '@gitlab/ui';
import { joinPaths } from '~/lib/utils/url_utility';

export default {
  name: 'PackagePath',
  components: {
    GlIcon,
    GlLink,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  props: {
    path: {
      type: String,
      required: true,
    },
  },
  computed: {
    pathPieces() {
      return this.path.split('/');
    },
    root() {
      // we skip the first part of the path since is the 'base' group
      return this.pathPieces[1];
    },
    rootLink() {
      return joinPaths(this.pathPieces[0], this.root);
    },
    leaf() {
      return this.pathPieces[this.pathPieces.length - 1];
    },
    deeplyNested() {
      return this.pathPieces.length > 3;
    },
    hasGroup() {
      return this.root !== this.leaf;
    },
  },
};
</script>

<template>
  <div data-qa-selector="package-path" class="gl-display-flex gl-align-items-center">
    <gl-icon data-testid="base-icon" name="project" class="gl-mx-3 gl-min-w-0" />

    <gl-link data-testid="root-link" class="gl-text-gray-500 gl-min-w-0" :href="`/${rootLink}`">
      {{ root }}
    </gl-link>

    <template v-if="hasGroup">
      <gl-icon data-testid="root-chevron" name="chevron-right" class="gl-mx-2 gl-min-w-0" />

      <template v-if="deeplyNested">
        <span
          v-gl-tooltip="{ title: path }"
          data-testid="ellipsis-icon"
          class="gl-inset-border-1-gray-200 gl-rounded-base gl-px-2 gl-min-w-0"
        >
          <gl-icon name="ellipsis_h" />
        </span>
        <gl-icon data-testid="ellipsis-chevron" name="chevron-right" class="gl-mx-2 gl-min-w-0" />
      </template>

      <gl-link data-testid="leaf-link" class="gl-text-gray-500 gl-min-w-0" :href="`/${path}`">
        {{ leaf }}
      </gl-link>
    </template>
  </div>
</template>
