<template>
  <ui-chip :color="color" class="text-white">
    {{ label }}
  </ui-chip>
</template>

<script lang="ts">
import { Prop, Vue, Component } from 'vue-property-decorator'
import StatusService from '../services/StatusService'
import { TrackStatus as TrackStatusType } from '../dto/TrackStatus'
import UiChip from '../../../../lib-components/UiChip.vue'

const colors: { [key in TrackStatusType]: string } = {
  InTransit: 'secondary',
  Delivered: 'positive',
  NotFound: 'accent',
  Return: 'warning',
  Error: 'negative',
  New: 'blue-grey-3',
  Expired: 'dark',
  PickUp: 'deep-purple',
}

@Component({
  components: { UiChip },
})
export default class TrackStatus extends Vue {
  @Prop(String) status!: TrackStatusType

  get label(): string {
    return StatusService.getStatusLabel(this.status)
  }

  get color(): string {
    return colors[this.status]
  }
}
</script>
