<template>
    <div>
        <div
            v-if="interactionText && interactionTextVisible"
            class="interaction-text"
        >
            <div class="bg-white px-4 py-3">
                <p class="m-0 p-0">
                    {{ interactionText }}
                </p>
            </div>
        </div>
        <VuePannellum
            ref="pannellum"
            class="pannellum"
            :voffset="0"
            :src="scenes"
            :orientation="isOrientationOn"
            :draggable="isDraggable"
            :auto-load="true"
            :show-zoom="false"
            :show-fullscreen="false"
            :compass="false"
            :hfov="hfov"
            :north-offset="0"
            :yaw.sync="yaw"
            :pitch.sync="pitch"
            :vaov="180"
            :hot-spots="hotspots"
            @load="loadHandler"
            @error="errorHandler"
        ></VuePannellum>
    </div>
</template>

<script>
import VuePannellum from 'vue-pannellum'

export default {
    name: 'Fugger360Room',
    components: {
        VuePannellum,
    },
    props: {
        url: {
            type: String,
            default: '',
        },
        scenes: {
            type: Object,
            default: () => {},
        },
        century: {
            type: Number,
            default: 0,
        },
        hotspots: {
            type: Array,
            default: () => {},
        },
        interactionText: {
            type: String,
            default:
                'Wählen Sie ein Objekt aus oder verwenden Sie den Slider, um das Jahrhundert zu wechseln!',
        },
        interactionTextVisible: {
            type: Boolean,
            default: false,
        },
        yaw: {
            type: Number,
            default: 90,
        },
        isDraggable: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            isOrientationOn: true,
            hfov: 120,
            // yaw: 90,
            pitch: -15,
            northOffset: 90,
            vOffset: 180,
        }
    },
    watch: {
        century(val) {
            // this.$refs.pannellum.viewer.loadScene('century-' + (16 + val))
            // console.log('century-' + (16 + val))
            // console.log(this.$refs.pannellum.viewer.getConfig())

            let targetPitch = Math.round(this.$refs.pannellum.viewer.getPitch()) // get actual pitch and round
            let targetYaw = Math.round(this.$refs.pannellum.viewer.getYaw()) // get actual yaw and round
            let targetHfov = Math.round(this.$refs.pannellum.viewer.getHfov()) // get actual Hfov and round

            this.$refs.pannellum.viewer.loadScene(
                'century-' + (16 + val),
                targetPitch,
                targetYaw,
                targetHfov,
            )
        },
    },
    mounted() {
        // this.$refs.pannellum.viewer.loadScene('century-16')
    },
    methods: {
        errorHandler() {
            this.$emit('error')
        },
        loadHandler() {
            this.$emit('load')
        },
    },
}
</script>

<style lang="scss" scoped>
@import 'assets/scss/variables';
@import 'assets/scss/buttons';
@import 'assets/scss/global';

.pannellum {
    height: 100vh;
    width: 100vw;
}

.hotspot {
    position: absolute;
    height: 26px;
    width: 26px;
    z-index: 99;
    background-color: rgba(255, 255, 255, 1) !important;
    border-radius: 50%;
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.5),
        1px 1px 15px 15px rgba(0, 0, 0, 0.25);
    transform: translate(-50%, -50%);
    pointer-events: all !important;
}

.interaction-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(41vw * var(--pxToVw));
    width: calc(350vw * var(--pxToVw));
    z-index: 999;
}
</style>
<style>
.pnlm-load-box {
    background-color: transparent;
}
</style>
