<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { apiGetDays } from './client';
import type { Schedule } from './models';
import { formatRussianDate, getRelativeDayName, timeAgo } from './date';
import { capitalizeFirstLetter } from './text';

const schedule = ref<Schedule>({ updateTime: "", days: [] })

onMounted(async () => {
  schedule.value = await apiGetDays()
})

</script>

<template>
  <div>
    Обновлено: {{ timeAgo(schedule.updateTime) }}
    <div v-for="day in schedule.days" :key="day.date" class="day-block">
      {{ capitalizeFirstLetter(formatRussianDate(day.date)) }}
      <span v-if="getRelativeDayName(day.date) !== ''">({{ getRelativeDayName(day.date) }})</span>
      <div v-for="performance in day.performances" :key="performance.name" class="performance-block">
        <div v-if="performance.timeCollection !== '' && performance.timeCollection !== '-'">
          Сбор: {{ performance.timeCollection }}
        </div>
        <div v-if="performance.timeStart !== '' && performance.timeStart !== '-'">
          Время: {{ performance.timeStart }}
        </div>
        <div>
          Место: {{ capitalizeFirstLetter(performance.place) }}
        </div>
        <div>
          {{ capitalizeFirstLetter(performance.name) }}
        </div>
        <div>
          Номера:
          <div v-for="number in performance.numbers" :key="number.name">
            - {{ number.name }}
          </div>
        </div>
        <div v-if="performance.costumes !== '' && performance.costumes !== '-'">
          {{ capitalizeFirstLetter(performance.costumes) }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.day-block {
  border: solid 2px #000058;
  margin: 10px 0;
  padding: 15px;
  border-radius: 10px;
}

.performance-block {}
</style>
