<script>
import { computed } from 'vue';
import { timedelta } from '@silane/datetime';

import DateAndResourceTimeTable from '../../../../../components/DateAndResourceTimeTable.vue';
import { inject, keys as injectionKeys } from '../../../../../injection';
import { datetimeRange } from '../../../../../common/utils.js';
import { getResourceDisplayText } from '../../../../../common/zkan-utils.js';


export default {
  name: 'PageMasterTimetableResourcesIdTimeline',
  components: { DateAndResourceTimeTable },
  props: {
    id: { type: String, required: true },
  },
  setup(props) {
    const resourceStore = inject(injectionKeys.resourceStore);
    const generalTimetableScope = inject(injectionKeys.generalTimetableScope);

    const classroom = computed(() => resourceStore.resources.value.find(
      x => x.id === generalTimetableScope.classroom.value
    ) ?? null)
    const resource = computed(() => resourceStore.resources.value.find(
      x => x.id === props.id
    ) ?? null);
    const dates = computed(() => [...datetimeRange(
      ...generalTimetableScope.dateRange.value, timedelta({ days: 1 }),
    )]);

    return { getResourceDisplayText, classroom, resource, dates };
  },
}
</script>

<template>
<template v-if="classroom && resource">
  <h1>
    <router-link
      to="./index"
    >{{ getResourceDisplayText(resource) }}</router-link>の時間割表
  </h1>
  <p>
    <router-link :to="`/printingtimeline?classroom=${
      classroom.id
    }&mode=resource-date&resource=${resource.id}&date=${
      dates.map(x => x.isoFormat()).join(',')
    }`">印刷用</router-link> <router-link :to="`/printingtimeline?classroom=${
      classroom.id
    }&mode=resource-date&resource=${resource.id}&date=${
      dates.map(x => x.isoFormat()).join(',')
    }&hideconfidence=y`">印刷用（外部送信用）</router-link>
  </p>
  <date-and-resource-time-table
    :classroom="classroom" mode="resource" 
    :resources="[resource]" :dates="dates" class="timeline"
  />
</template>
<p v-if="!classroom">教室がみつかりません。</p>
<p v-if="!resource">リソースがみつかりません。</p>
</template>

<style scoped>
.timeline {
  height: calc(100vh - 5em);
  --date-and-resource-time-table--scroll-content-height-per-duration: 0.002em;
}
</style>
