<script lang="ts">
import { Date, DateTime, add, timedelta } from '@silane/datetime';
import { computed } from 'vue';
import { useRouter } from 'vue-router';

import DateAndResourceTimeTable from '../../../components/DateAndResourceTimeTable.vue';
import { inject, keys as injectionKeys } from '../../../injection';

export default {
  name: 'PageMasterTimetableDatetimeline',
  components: { DateAndResourceTimeTable },
  props: {
    date: { type: String, required: true },
  },
  setup(props) {
    const router = useRouter();
    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 resources = computed(() => resourceStore.resources.value.filter(
      x => !x.disabled && x.type === 'teacher'
    ));
    const date = computed({ get: () => {
      try {
        return Date.fromISOFormat(props.date);
      } catch(e) {
        return null;
      }
    }, set: val => {
      if(!val) return;
      router.push(`./${val.isoFormat()}`);
    }});

    function setDate(value: Date) {
      date.value = value;
    }

    return { add, timedelta, classroom, resources, date, setDate };
  }
}
</script>

<template>
<template v-if="classroom && date">
  <h1><date-time :value="date" />の時間割表</h1>
  <label>日付<input-date v-model="date" /></label>
  <button type="button" @click="setDate(add(date, timedelta({ days: -1 })))">
    ←
  </button>
  <button type="button" @click="setDate(add(date, timedelta({ days: 1 })))">
    →
  </button>
  <button type="button" @click="setDate(add(date, timedelta({ days: -7 })))">
    ↞
  </button>
  <button type="button" @click="setDate(add(date, timedelta({ days: 7 })))">
    ↠
  </button>
  <p style="display: flex; gap: 1em;">
    <router-link :to="`/printingtimeline?classroom=${
      classroom.id
    }&mode=date-resource&date=${date.isoFormat()}&resource=${
      resources.map(x => x.id).join(',')
    }`">印刷用</router-link>
    <router-link :to="`/printingtimeline?classroom=${
      classroom.id
    }&mode=date-resource&date=${date.isoFormat()}&resource=${
      resources.map(x => x.id).join(',')
    }&hideconfidence=y`">
      印刷用（外部送信用）
    </router-link>
  </p>
  <date-and-resource-time-table
    :classroom="classroom" mode="date" :dates="[date]" :resources="resources"
    class="timeline"
  />
</template>
<p v-if="!classroom">教室が見つかりません。</p>
<p v-if="!date">日付の形式が不正です。</p>
</template>

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