<template>
    <div class="chapter-page">
        <div
            class="toolbar-wrapper"
            :class="{ 'toolbar-hidden': !headerStore.shouldShowReaderToolbar }"
        >
            <div class="toolbar-slide">
                <ReaderToolbar :chapter-reader-ref="chapterReaderRef" />
            </div>
        </div>
        <div class="reader-container">
            <ChapterReader ref="chapterReaderRef" :chapter-id="chapterId" />
        </div>
    </div>
</template>

<script setup>
    import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useHeaderStore } from '../../../../shared/stores/headerStore';
import ChapterReader from '../components/ChapterReader.vue';
import ReaderToolbar from '../components/ReaderToolbar.vue';

    const route = useRoute();
    const headerStore = useHeaderStore();

    const chapterId = computed(() => route.params.chapterId);
    const chapterReaderRef = ref(null);
</script>

<style lang="postcss" scoped>
    .chapter-page {
        @apply w-full h-full flex flex-col;
    }

    .toolbar-wrapper {
        @apply overflow-hidden;
        max-height: 5rem;
        transition: max-height 300ms ease-in-out;
    }

    .toolbar-wrapper.toolbar-hidden {
        max-height: 0;
    }

    .toolbar-slide {
        transform: translateY(0);
        transition: transform 300ms ease-in-out;
    }

    .toolbar-hidden .toolbar-slide {
        transform: translateY(-100%);
    }

    .reader-container {
        @apply flex-1 overflow-hidden min-h-0;
    }
</style>
