<script setup lang="ts">
import jfapi, { type Item } from '@/jfapi'
import { getDisplayDuration, ticksToMH } from '@/utils'
import { onBeforeMount, ref } from 'vue'

const props = defineProps<{
  itemId: string
  endsAt?: boolean
  size: string
}>()

const item = ref<Item>()
const timeString = ref('')
onBeforeMount(async () => {
  const data = await jfapi.GetItem(props.itemId)
  if (data) {
    item.value = data
    const now = new Date()
    const runtime = ticksToMH(data.RunTimeTicks)
    const endTime = new Date(now.getTime() + 60 * 1000 * (runtime.hours * 60 + runtime.minutes))
    timeString.value = `${endTime.toLocaleString('default', { hour: 'numeric', minute: 'numeric' }).replace(' PM', 'pm').replace(' AM', 'am')}`
  }
})
</script>

<template>
  <div
    class="info-misc"
    :style="{ fontSize: `${props.size}px`, gap: `${size === 'sm' ? '1.4' : '3'}em` }"
  >
    <div class="misc-info-year">{{ item?.ProductionYear }}</div>
    <div class="misc-info-runtime" v-if="item?.RunTimeTicks">
      {{ getDisplayDuration(item?.RunTimeTicks) }}
    </div>
    <div class="misc-info imdb-rating" v-if="item?.CommunityRating">
      <font-awesome-icon icon="fa-solid fa-star" size="xs" class="star-rating" />
      {{ item?.CommunityRating.toFixed(2) }}
    </div>
    <div class="misc-info-age-rating" v-if="item?.OfficialRating">
      <span :class="`age-rating ${props.size ? props.size : ''}`">{{ item?.OfficialRating }}</span>
    </div>
    <div class="media-showcase-end-time" v-if="props.endsAt">{{ `Ends at ${timeString}` }}</div>
  </div>
</template>

<style scoped>
.info-misc {
  display: flex;
  justify-content: space-between;
  color: var(--color-text);
}
</style>
