<template>
    <div class="audio-text-box">
        <div class="overlay"></div>

        <div class="audio-text-content d-flex flex-wrap">
            <div class="text-content d-flex flex-grow-1 p-5 m-5">
                <div
                    class="family-text family-box"
                    :class="{ visible: showText }"
                    v-html="
                        getLanguage(
                            content.currentItem.children[0].content.body,
                        )
                    "
                ></div>
                <div
                    class="family-image family-box"
                    :class="{ visible: !showText }"
                >
                    <img :src="getAssetPath(content.familyimage)" alt="" />
                </div>
            </div>

            <div class="audio-content">
                <div
                    class="navi-buttons d-flex flex-wrap justify-content-center"
                >
                    <div
                        class="left-btn mx-0 mb-3"
                        :class="{ active: showVolume }"
                    >
                        <div class="submenu volume-menu">
                            <div
                                class="submenu-item minus"
                                :class="{ disabled: volume === 0 }"
                                @click="changeVolume('minus')"
                            >
                                -
                            </div>
                            <div class="submenu-item volume">{{ volume }}%</div>
                            <div
                                class="submenu-item plus"
                                :class="{ disabled: volume === 100 }"
                                @click="changeVolume('plus')"
                            >
                                +
                            </div>
                        </div>

                        <fugger-button
                            v-if="!showVolume"
                            class="volume-btn pr-5"
                            iconname="volume-icon"
                            iconpos="left"
                            theme="light"
                            type="menulink-btn"
                            @click="toggleSlideVolume()"
                        >
                            {{ getInterfaceText('button_volume') }}
                        </fugger-button>
                        <fugger-button
                            v-else
                            class="pr-5 close-icon"
                            iconname="close-icon"
                            iconpos="left"
                            theme="active"
                            type="menulink-btn"
                            @click="toggleSlideVolume()"
                        >
                            {{ getInterfaceText('button_volume') }}
                        </fugger-button>
                    </div>
                    <div
                        class="middle-btn mb-3 mx-3"
                        :class="{ active: showPopupContent }"
                    >
                        <fugger-button
                            v-if="!showPopupContent"
                            class="pr-5"
                            theme="light"
                            iconname="family-icon"
                            iconpos="left"
                            type="menulink-btn"
                            @click="togglePopupContent()"
                        >
                            {{ getInterfaceText('button_steckbrief') }}
                        </fugger-button>
                        <fugger-button
                            v-else
                            class="pr-5 close-icon"
                            iconname="close-icon"
                            iconpos="left"
                            theme="active"
                            type="menulink-btn"
                            @click="togglePopupContent()"
                        >
                            {{ getInterfaceText('button_steckbrief') }}
                        </fugger-button>

                        <div
                            class="popup-content p-5"
                            :class="{ active: showPopupContent }"
                        >
                            <h2>{{ getInterfaceText('headline_profile') }}</h2>
                            <!--                            <h2>Steckbrief</h2>-->
                            <p>
                                <strong>
                                    {{
                                        getLanguage(
                                            content.currentItem.content
                                                .headline,
                                        )
                                    }}
                                </strong>
                            </p>
                            <div
                                v-html="
                                    getLanguage(
                                        content.currentItem.children[0]
                                            .children[0].content.body,
                                    )
                                "
                            ></div>
                        </div>
                    </div>
                    <div
                        class="right-btn text-image-btn mx-0 mb-3"
                        :class="{ active: showText }"
                    >
                        <fugger-button
                            v-if="!showText"
                            class="pr-5"
                            theme="light"
                            iconname="text-icon"
                            iconpos="left"
                            type="menulink-btn"
                            @click="toggleTextImage()"
                        >
                            Text
                        </fugger-button>
                        <fugger-button
                            v-else
                            class="pr-5 close-icon"
                            iconname="close-icon"
                            iconpos="left"
                            theme="active"
                            type="menulink-btn"
                            @click="toggleTextImage()"
                        >
                            Text
                        </fugger-button>
                    </div>
                </div>
                <div
                    v-if="
                        getAssetPath(
                            content.currentItem.content.audio[shortLang]
                                .audioAsset,
                        )
                    "
                    class="audio-progress-bar"
                >
                    <audio-progress-bar
                        :duration="audioDurationTime"
                        :current-time.sync="audioCurrentTime"
                    />

                    <!--                    <iframe src="silence.mp3" type="audio/mp3" allow="autoplay" id="audio" style="display:none"></iframe>-->
                    <audio
                        ref="audioplayer"
                        class="audioplayer"
                        autoload
                        preload="auto"
                        autoplay
                        :loop="loop"
                        @timeupdate="audioTimeUpdate"
                    >
                        <source
                            :src="
                                getAssetPath(
                                    content.currentItem.content.audio[shortLang]
                                        .audioAsset,
                                )
                            "
                            type="audio/mp3"
                        />
                    </audio>
                </div>

                <div class="audio-text-button w-100 px-3 p-3">
                    <p class="p-0 m-0">
                        {{ index + 16 }}.
                        {{ getInterfaceText('century_slider_century') }}
                    </p>
                    <h2
                        v-html="
                            getLanguage(content.currentItem.content.headline)
                        "
                    ></h2>

                    <div class="play-pause-button">
                        <fugger-button
                            theme="light"
                            class="play-pause-btn"
                            iconname="game-icon"
                            iconpos="right"
                            type="play-pause-btn"
                            :active="!playing"
                            @click="togglePlayPause()"
                        ></fugger-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import AudioProgressBar from './AudioProgressBar'
import FuggerButton from './FuggerButton.vue'

export default {
    name: 'AudioText',
    components: {
        FuggerButton,
        AudioProgressBar,
    },
    props: {
        content: {
            type: Object,
            default: null,
        },
        loop: {
            type: Boolean,
            default: false,
        },
        index: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            showVolume: false,
            showPopupContent: false,
            playing: true,
            audioCurrentTime: 0,
            audioDurationTime: 0,
            volume: 100,
            audioSrc: null,
            showText: false,
        }
    },
    computed: {
        shortLang() {
            return this.$store.state.currentShortLanguage
        },
    },
    methods: {
        toggleSlideVolume() {
            this.showVolume = !this.showVolume
            this.showPopupContent = false
        },
        togglePopupContent() {
            this.showPopupContent = !this.showPopupContent
            this.showVolume = false
        },
        toggleTextImage() {
            this.showText = !this.showText
            this.showVolume = false
            this.showPopupContent = false
        },
        playAudio() {
            this.$refs.audioplayer.play()
        },
        togglePlayPause() {
            if (this.playing) {
                this.$refs.audioplayer.pause()
            } else {
                this.$refs.audioplayer.play()
            }
            this.playing = !this.playing
        },
        audioTimeUpdate() {
            if (this.$refs.audioplayer) {
                this.audioCurrentTime = this.$refs.audioplayer.currentTime
                this.audioDurationTime = this.$refs.audioplayer.duration
            }
        },

        changeVolume(event) {
            if (event === 'plus') {
                if (this.volume < 100) {
                    this.$refs.audioplayer.volume += 0.25
                    this.volume += 25
                }
            } else {
                if (this.volume > 0) {
                    this.$refs.audioplayer.volume -= 0.25
                    this.volume -= 25
                }
            }

            // this.$store.dispatch(
            //     'setThemeFontsize',
            //     this.$store.state.themeSizes[this.dataFontsize],
            // )

            // this.$emit('changeVolume', this.volume)
            // eventbus.$emit('changeVolume', this.volume)
        },
    },
}
</script>

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

.audio-text-box {
    height: 100vh !important;
    width: 100vw !important;
    position: absolute;
    top: 0px;
    left: 0px;
}

.audio-text-content {
    display: inline-block;
    background-color: #fff;

    align-content: space-between;
    position: absolute;
    z-index: 99;
    margin: calc(100vw * var(--pxToVw));
    width: calc(100% - calc(200vw * var(--pxToVw)));
    height: calc(100% - calc(200vw * var(--pxToVw)));
}

.text-content {
    height: auto;
    width: 100%;
    display: inline-block;
    background-color: #fff;
}

.navi-buttons {
    width: 100%;
    position: relative;
}

.right-btn {
    float: right;
}

.left-btn {
    z-index: 10 !important;
}

.middle-btn,
.right-btn {
    z-index: 5 !important;
}

.left-btn,
.middle-btn,
.right-btn {
    width: auto !important;
    //min-width: calc(33.3% - 7rem);
    //display: inline-block;
    position: relative;
    //box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    //height: calc(1.6 * 80vw * var(--pxToVw));
    align-items: center;
    //display: flex;

    .btn {
        width: auto !important;
        //height: calc(1.6 * 80vw * var(--pxToVw)) !important;
    }

    span {
        z-index: 99;
        position: relative;
        display: block;
        padding: 0px !important;
    }

    &.active {
        //background-color: var(--primary-active);

        .button-wrap .label,
        button,
        .label {
            background: var(--primary-active) !important;
            line-height: calc(1.6 * 80vw * var(--pxToVw));
        }

        .submenu {
            bottom: calc(85vw * var(--pxToVw));
            opacity: 1;
            z-index: 20;
            //width: calc(1.6 * 242vw * var(--pxToVw));
            transition: all 0.3s linear;
        }
    }
}

.left-btn,
.middle-bt {
    min-width: calc(35% - 5rem);
}

.right-btn {
    min-width: calc(30% - 5rem);
}

.submenu {
    height: auto;
    //width: 100%; //calc(100% - #{$menu-icon-size});
    //min-width: calc(244vw * var(--pxToVw));
    //width: calc(1.6 * 242vw * var(--pxToVw));
    text-align: left;
    position: absolute;
    bottom: 0px;
    //bottom: calc(80vw * var(--pxToVw));
    ////calc(#{$menu-item-height} - #{$menu-item-gap});
    //left: calc(var(--menu-icon-size) + var(--menu-item-gap));
    opacity: 0;
    z-index: 10;

    left: 0px;
    //background-color: white;
    transition: all 0.3s linear;
    visibility: visible;

    .submenu-item {
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        //height: calc(1.6 * 80vw * var(--pxToVw));
        position: relative;
        bottom: 0px;
        line-height: calc(80vw * var(--pxToVw));
        padding: 0 calc(15vw * var(--pxToVw));
        color: var(--primary);
        font-size: calc(30vw * var(--pxToVw));
        //border-top: 1px solid $gray;
        background-color: white;
        margin: calc(1vw * var(--pxToVw));

        text-align: center;
        float: left;

        &.minus,
        &.plus {
            width: calc(80vw * var(--pxToVw));
            align-items: center;
            display: flex;
            justify-content: center;

            &.disabled {
                color: $gray;
            }
        }

        &.volume {
            width: calc(80vw * var(--pxToVw));
            align-items: center;
            display: flex;
            justify-content: center;
        }

        &.active {
            color: var(--primary);
            //background-color: $primary-main-blue;
            position: relative;

            &:after {
                //position: absolute;
                //content: '';
                //right: 10vw * $pxToVw;
                //top: 50%;
                //transform: translateY(-50%);

                content: '';
                position: absolute;
                background-image: url('./assets/icons/icons_30x30/icon_check.svg');
                background-size: contain;
                background-repeat: no-repeat;
                background-position: right center;
                right: calc(10vw * var(--pxToVw));
                top: 50%;
                color: #fff;
                width: calc(40vw * var(--pxToVw));
                height: 100%;
                font-size: 30px;
                transform: translateY(-50%);
            }
        }
    }
}

.audio-content {
    display: inline-block;
    position: relative;
    width: 100%;
}

.audio-text-button {
    background-color: var(--primary);
    text-align: left;
    position: relative;

    h2,
    p {
        color: white;
    }
}

.audio-text-button {
    position: relative;

    button {
        padding: 10px;
    }
}

.overlay {
    z-index: 99;
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
}

.progress-bar {
    background: var(--primary);
    margin-bottom: 10px;
}

.active .popup-content {
    display: block;
}
.popup-content {
    display: none;
    min-width: 50vw;
    min-height: 40vw;
    position: absolute;
    bottom: calc(90vw * var(--pxToVw));
    right: 50%;
    transform: translateX(46%);
    background-color: #fff;
    box-shadow: 0px 0px calc(14vw * var(--pxToVw)) rgba(0, 0, 0, 0.25);
    z-index: 0;
    opacity: 0;
    transition: all 0.3s linear;

    &.active {
        opacity: 1;
        z-index: 10;
        transition: all 0.3s linear;
    }

    h2 {
        font-weight: bold;
        font-size: calc(50vw * var(--pxToVw)) !important;
        color: var(--primary);
    }

    //p {
    //    font-size: calc(24vw * var(--pxToVw)) !important;
    //}
}

//p {
//    font-size: calc(34vw * var(--pxToVw)) !important;
//}
</style>
<style lang="scss">
@import 'assets/scss/variables';

.left-btn,
.middle-btn,
.right-btn {
    float: left;

    button {
        width: auto;
    }

    .close-icon.button-wrap.light button {
        background: $primary-dark-blue !important;
        width: auto !important;
    }

    .close-icon svg {
        fill: white !important;
    }
}

.play-pause-button {
    right: calc(20vw * var(--pxToVw));
    height: calc(80vw * var(--pxToVw));
    width: calc(80vw * var(--pxToVw));
    top: 50% !important;
    display: block;
    transform: translateY(-50%) !important;
    position: absolute;

    svg circle {
        fill: white !important;
    }
}

.volume-btn {
    z-index: 20;
    display: block;
}

//.text-content p {
//    font-size: calc(26vw * var(--pxToVw)) !important;
//}
.family-image {
    position: absolute;
    opacity: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: all 0.3s linear;

    &.visible {
        opacity: 1;
        transition: all 0.3s linear;
    }

    img {
        max-width: 100%;
    }
}

.family-text {
    opacity: 0;
    transition: all 0.3s linear;

    &.visible {
        opacity: 1;
        z-index: 5;
        transition: all 0.3s linear;
    }
}
</style>
