<template>
    <div :class="{ visible: show }" class="page-overlay">
        <!--   @click="start"     <div v-if="contenttype === 'interaction'" class="overlay"></div>-->
        <div
            v-if="contenttype === 'video'"
            class="modal-body d-flex h-100 w-100 video-overlay text-white flex-wrap
           justify-content-center align-content-center"
        >
            <slot></slot>
        </div>

        <div
            v-if="contenttype === 'audio'"
            class="modal-body d-flex h-100 w-100 audio-overlay text-white flex-wrap
           justify-content-center align-content-center"
        >
            <slot></slot>
        </div>

        <div
            v-if="
                (contenttype === 'poi' || contenttype === '360room') &&
                    modalVisible
            "
            class="modal-body d-flex h-100 w-100 interaction text-white flex-wrap
           justify-content-center align-content-center"
            :class="{ visible: modalVisible }"
        >
            <div class="overlay"></div>
            <div
                class="touch-to-start"
                :class="{ visible: modalVisible }"
                @click="start"
            ></div>
            <template v-if="contenttype === 'poi'">
                <div class="zoom interaction-text">
                    <div
                        class="interaction-icon mb-3 d-flex justify-content-center"
                    >
                        <fugger-icons
                            :width="369"
                            :height="116"
                            name="resize-icon"
                        ></fugger-icons>
                    </div>
                    <div class="bg-white px-4 py-4 text-center">
                        <p>
                            {{ getInterfaceText('instruction_resize') }}
                        </p>
                    </div>
                </div>
                <div class="move interaction-text">
                    <div
                        class="interaction-icon mb-3 d-flex justify-content-center"
                    >
                        <fugger-icons
                            :width="116"
                            :height="116"
                            name="touch-overlay-icon"
                        ></fugger-icons>
                    </div>
                    <div class="bg-white px-4 py-4 text-center">
                        <p>
                            {{ getInterfaceText('instruction_move') }}
                        </p>
                    </div>
                </div>
                <div class="start interaction-text">
                    <div class="bg-white px-4 py-4 text-center">
                        <p>
                            {{ getInterfaceText('instruction-touch-to-start') }}
                        </p>
                    </div>
                </div>
            </template>
            <template v-if="contenttype === '360room'">
                <div class="slider interaction-text">
                    <div class="bg-white px-4 py-4">
                        <p>
                            {{ getInterfaceText('instruction_century_slider') }}
                        </p>
                    </div>
                    <div
                        class="interaction-icon mb-3 d-flex justify-content-center"
                    >
                        <fugger-icons
                            name="move-slider-icon"
                            :width="140"
                            :height="120"
                        ></fugger-icons>
                    </div>
                </div>
                <div v-if="!isDraggable" class="instruction interaction-text">
                    <div class="bg-white px-4 py-4">
                        <p>
                            {{ getInterfaceText('instruction_360_image') }}
                        </p>
                    </div>
                </div>
                <div class="poi-instruction interaction-text">
                    <div
                        class="interaction-icon mb-3 d-flex justify-content-center"
                    >
                        <fugger-icons
                            name="touch-instruction-icon"
                            :height="120"
                            :width="120"
                        ></fugger-icons>
                    </div>
                    <div class="bg-white px-4 py-4">
                        <p>
                            {{ getInterfaceText('instruction_poi_click') }}
                        </p>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
import { eventbus } from './index'
import FuggerIcons from './FuggerIcons.vue'

export default {
    name: 'Overlay',
    components: {
        FuggerIcons,
    },
    props: {
        duration: {
            type: Number,
            default: 0,
        },
        contenttype: {
            type: String,
            default: '',
        },
        show: {
            type: Boolean,
            default: false,
        },
        isDraggable: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            modalVisible: true,
            durationTimeout: null,
        }
    },
    watch: {
        show(val) {
            if (this.duration && val) {
                console.log('activated watch')
                this.durationTimeout = setTimeout(() => {
                    this.$emit('closeoverlay')
                    eventbus.$emit('closeoverlay')
                    clearTimeout(this.durationTimeout)
                }, this.duration * 1000)
            }
        },
    },
    mounted() {
        // console.log('activated')
        if (this.duration) {
            this.durationTimeout = setTimeout(() => {
                this.$emit('closeoverlay')
                eventbus.$emit('closeoverlay')
                clearTimeout(this.durationTimeout)
            }, this.duration * 1000)
        }
    },
    methods: {
        start() {
            // this.modalVisible = false
            setTimeout(() => {
                this.$emit('closeoverlay')
                eventbus.$emit('closeoverlay')
            }, 500)
        },
    },
}
</script>

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

.page-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    display: block;
    z-index: -1;
    opacity: 0;
    transition: all 0.3s linear;

    &.visible {
        opacity: 1;
        z-index: 999999 !important;
        transition: all 0.3s linear;
    }
}

.video-overlay {
    background: var(--primary);
    color: #fff !important;

    &.video-overlay-body {
        background: var(--primary);
        color: #fff !important;
    }

    &.modal-body {
        background: var(--primary);
        color: #fff !important;
    }
}

.audio-overlay {
    background: var(--primary);
    color: #fff !important;
    opacity: 0.8;

    &.audio-overlay-body {
        background: var(--primary);
        color: #fff !important;
    }
}

.overlay {
    z-index: 0;
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    transition: all 0.3s 0.2s linear;

    &.visible {
        z-index: 99;
        opacity: 1;
        transition: all 0.2s linear;
    }
}

.touch-to-start {
    width: 100%;
    height: 100%;
    z-index: 0;
    position: absolute;
    opacity: 1;
    transition: all 0.2s linear;

    &.visible {
        z-index: 99;
        opacity: 1;
        transition: all 0.2s linear;
    }
}

.interaction {
    opacity: 0;
    transition: all 0.2s linear;

    &.visible {
        z-index: 99;
        opacity: 1;
        transition: all 0.2s linear;
    }
}

.interaction-text {
    position: absolute;
    width: calc(350vw * var(--pxToVw));
    color: $text-color;

    h1 {
        color: white;
    }

    p {
        margin: 0;
    }
}

.instruction {
    left: 50%;
    transform: translateX(-50%);
    top: calc(41vw * var(--pxToVw));
}

.move {
    right: calc(460vw * var(--pxToVw));
    bottom: calc(350vw * var(--pxToVw));
}

.zoom {
    left: calc(370vw * var(--pxToVw));
    bottom: calc(350vw * var(--pxToVw));
}

.slider {
    left: calc(210vw * var(--pxToVw));
    top: calc(1035vw * var(--pxToVw));
}

.poi-instruction {
    right: calc(300vw * var(--pxToVw));
    bottom: calc(300vw * var(--pxToVw));
}

.start {
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(41vw * var(--pxToVw));
}

.listen-icon {
    width: calc(250vw * var(--pxToVw));
    height: calc(250vw * var(--pxToVw));
    left: 50%;

    span {
        width: calc(180vw * var(--pxToVw));
        height: calc(180vw * var(--pxToVw));

        svg {
            width: 100%;
            height: 100%;

            path {
                fill: white !important;
            }
        }
    }
}

.interaction-icon {
    height: calc(120vw * var(--pxToVw));
    width: 100%;

    .icon {
        height: calc(120vw * var(--pxToVw));
        width: 100%;
    }
}
</style>
<style lang="scss">
.listen-icon {
    width: calc(250vw * var(--pxToVw));
    height: calc(250vw * var(--pxToVw));
    left: 50%;
    text-align: center;

    .icon {
        position: relative !important;
        svg {
            width: calc(250vw * var(--pxToVw)) !important;
            height: calc(250vw * var(--pxToVw)) !important;
        }
    }

    h3,
    p {
        color: white;
    }
}
</style>
