<template>
    <div class="flipbook-content">
        <FlipBook
            ref="flipbook"
            class="flipbook"
            :pages="pages"
            :gloss="0"
            :ambient="0"
            :zooms="null"
            :centering="false"
            @flip-right-end="onFlipRightEnd"
            @flip-left-end="onFlipLeftEnd"
        />
        <img
            class="flipbook-bookmark"
            src="./assets/img/1521-08-23_stiftung_lesezeichen.png"
        />
        <SliderControls
            :slide-current-index="activeDot"
            :slides-to-show-scroll="2"
            :slides-number="pages.length"
            @next="$refs.flipbook.flipRight()"
            @prev="$refs.flipbook.flipLeft()"
        ></SliderControls>
    </div>
</template>

<script>
import SliderControls from './SliderControls.vue'
import FlipBook from 'flipbook-vue'

export default {
    name: 'FuggerFlipbook',
    components: {
        FlipBook,
        SliderControls,
    },
    props: {
        pages: {
            type: Array,
            default: null,
        },
    },
    data() {
        return {
            bookPages: null,
            currentPage: 1,
            activeDot: 1,
        }
    },
    mounted() {
        this.$emit('currentPage', this.currentPage)
        window.addEventListener('keydown', ev => {
            let flipbook = this.$refs.flipbook
            if (!flipbook) {
                return
            }
            if (ev.keyCode === 37) {
                flipbook.flipLeft()
            }
            if (ev.keyCode === 39) {
                flipbook.flipRight()
            }
        })
    },
    methods: {
        onFlipLeftEnd(page) {
            this.currentPage = page
            this.$emit('currentPage', this.currentPage)
            this.activeDot = page > 1 ? page / 2 + 1 : 1
        },
        onFlipRightEnd(page) {
            this.currentPage = page
            this.$emit('currentPage', this.currentPage)
            this.activeDot = page > 1 ? page / 2 + 1 : 1
        },
    },
}
</script>

<style lang="scss">
@import '~bootstrap/scss/functions';
@import 'assets/scss/variables';
@import '~bootstrap/scss/bootstrap';

.flipbook-content {
    width: calc(975vw * var(--pxToVw));
    height: 90vh;
    left: 50%;
    top: 0vh;
    transform: translateX(-50%);
    position: relative;
}

.flipbook {
    width: calc(975vw * var(--pxToVw));
    height: calc(650vw * var(--pxToVw));
    position: absolute;
    left: 0;
    top: calc(140vw * var(--pxToVw));
    z-index: 100;
    &-bookmark {
        position: absolute;
        left: 47%;
        top: calc((136vw + 650vw) * var(--pxToVw));
    }
}

.viewport .container {
    padding: 0px;
    margin: 0px;
    max-width: unset !important;
}

.flip-navigation {
    position: absolute;
    bottom: calc(50vw * var(--pxToVw));
    width: calc(800vw * var(--pxToVw));
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;

    .flipRight {
        position: absolute;
        right: 0px;
    }

    .flipLeft {
        position: absolute;
        left: 0px;
    }
}

.click-to-flip {
    height: auto !important;
}
</style>
