<script>
import { ref, watch, provide } from 'vue';
import { useRoute } from 'vue-router';

import { keys as injectionKeys } from './injection';
import { useNotification } from './composables/notification';
import { useDatabase } from './composables/database';
import { useErrorHandler } from './composables/errorhandler';
import { useColorLabelStore } from './composables/colorlabelstore';
import { useTimeLabelStore } from './composables/timelabelstore';
import { useResourceStore } from './composables/resourcestore';
import { useResourceHourStore } from './composables/resourcehourstore';
import { useEventStore } from './composables/eventstore';
import NotificationToast from './components/NotificationToast.vue';


export default {
  name: 'App',
  components: { NotificationToast },
  setup() {
    const route = useRoute();

    const notification = useNotification();
    const database = useDatabase();
    const errorHandler = useErrorHandler(notification);
    const colorLabelStore = useColorLabelStore();
    const timeLabelStore = useTimeLabelStore(database);
    const resourceStore = useResourceStore(database);
    const resourceHourStore = useResourceHourStore(database);
    const eventStore = useEventStore(database, timeLabelStore, resourceStore);

    provide(injectionKeys.notification, notification);
    provide(injectionKeys.database, database);
    provide(injectionKeys.errorHandler, errorHandler);
    provide(injectionKeys.colorLabelStore, colorLabelStore);
    provide(injectionKeys.timeLabelStore, timeLabelStore);
    provide(injectionKeys.resourceStore, resourceStore);
    provide(injectionKeys.resourceHourStore, resourceHourStore);
    provide(injectionKeys.eventStore, eventStore);

    const loaded = ref(false);

    const load = errorHandler.handleErrorAsync(async () => {
      if(!navigator.storage) {
        alert('動作環境が対応していません。Storage API にアクセスできません。');
        return;
      }
      if(!await navigator.storage.persist()) {
        alert('データの永続化が拒否されています。一定期間使用しないとデータが消える恐れがあるため、データのエクスポートを必ず行ってください。');
      }

      await colorLabelStore.load();
      await timeLabelStore.load();
      await resourceStore.load();
      loaded.value = true;
    });
    load();

    watch(() => route.name, (to, from) => {
      const root = document.documentElement;
      if (from != undefined) {
        root.classList.toggle('page--' + from, false);
      }
      if(to != undefined) {
        root.classList.toggle('page--' + to, true);
      }
    }, { immediate: true });

    return {
      loaded,
    };
  }
}
</script>

<template>
  <p v-if="!loaded">Loading...</p>
  <template v-else>
    <router-view />
    <notification-toast />
  </template>
</template>

<style>
strong {
    color: red;
}

:is(article, aside, nav, section) h1 {
    border-bottom: double 3px black;
}
:is(article, aside, nav, section)
:is(article, aside, nav, section) h1 {
    border-bottom: solid 3px black;
}
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section) h1 {
    border-bottom: none;
    border-left: solid 4px black;
    padding: 0.25em 0.5em;
}
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section) h1 {
    border-bottom: none;
    border-left: none;
    padding: 0;
}
</style>
