import iconTimerSvg from 'icons/_icon_timer.svg';
import '../../lib/utils/datetime_utility';

export default {
  props: {
    finishedTime: {
      type: String,
      required: true,
    },

    duration: {
      type: Number,
      required: true,
    },
  },

  data() {
    return {
      iconTimerSvg,
    };
  },

  updated() {
    $(this.$refs.tooltip).tooltip('fixTitle');
  },

  computed: {
    hasDuration() {
      return this.duration > 0;
    },

    hasFinishedTime() {
      return this.finishedTime !== '';
    },

    localTimeFinished() {
      return gl.utils.formatDate(this.finishedTime);
    },

    durationFormated() {
      const date = new Date(this.duration * 1000);

      let hh = date.getUTCHours();
      let mm = date.getUTCMinutes();
      let ss = date.getSeconds();

      // left pad
      if (hh < 10) {
        hh = `0${hh}`;
      }
      if (mm < 10) {
        mm = `0${mm}`;
      }
      if (ss < 10) {
        ss = `0${ss}`;
      }

      return `${hh}:${mm}:${ss}`;
    },

    finishedTimeFormated() {
      const timeAgo = gl.utils.getTimeago();

      return timeAgo.format(this.finishedTime);
    },
  },

  template: `
    <td class="pipelines-time-ago">
      <p
        class="duration"
        v-if="hasDuration">
        <span
          v-html="iconTimerSvg">
        </span>
        {{durationFormated}}
      </p>

      <p
        class="finished-at"
        v-if="hasFinishedTime">

        <i
          class="fa fa-calendar"
          aria-hidden="true" />

        <time
          ref="tooltip"
          data-toggle="tooltip"
          data-placement="top"
          data-container="body"
          :title="localTimeFinished">
          {{finishedTimeFormated}}
        </time>
      </p>
    </td>
  `,
};