<template>
  <div class="bg-white">
    <template v-if="!isLoading && !!track">
      <track-header @close="close" :track="track" />
      <track-description :track="track" />
      <track-timeline v-if="hasTrackEvents" :track="track" />
      <tracking-info-block
        v-if="!isErrorStatus && !hasTrackEvents"
        title="Информации пока нет"
        icon="las la-route"
      />
      <tracking-info-block
        v-if="isErrorStatus && !hasTrackEvents"
        title="Проверьте номер, этот, похоже, не работает"
        icon="las la-meh"
      />
    </template>
    <ui-page-loading :showing="isLoading" />
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import { getDeliveryTrackingStore } from './delivery-tracking/store/DeliveryTrackingStore'
import { Track } from './delivery-tracking/dto/Track'
import UiPageLoading from '../../lib-components/UiPageLoading.vue'
import TrackHeader from './delivery-tracking/components/TrackHeader.vue'
import TrackDescription from './delivery-tracking/components/TrackDescription.vue'
import TrackTimeline from './delivery-tracking/components/TrackTimeline.vue'
import TrackingInfoBlock from './delivery-tracking/components/TrackingInfoBlock.vue'
import StatusService from './delivery-tracking/services/StatusService'

@Component({
  components: {
    TrackingInfoBlock,
    TrackTimeline,
    TrackDescription,
    TrackHeader,
    UiPageLoading,
  },
})
export default class UiDeliveryTracking extends Vue {
  @Prop(Object) track!: Track

  trackingStore = getDeliveryTrackingStore(this.$store)

  get isLoading() {
    return this.trackingStore.isLoading
  }

  get isErrorStatus() {
    return this.track?.status === StatusService.statuses.Error
  }

  get hasTrackEvents(): boolean {
    return !!this.track?.events?.length
  }

  @Emit()
  close() {
    return true
  }
}
</script>
