<template>
    <span
        class="button-wrap square-btn-drop-shadow"
        :class="[theme, { activemenu: active }]"
        @click="clickedButton(type)"
    >
        <button
            v-if="type === 'language-btn' || type === 'normal-btn'"
            :style="'width:' + width + 'px'"
            :class="type"
        >
            <label>
                <slot></slot>
            </label>
        </button>

        <button
            v-if="type === 'card-btn'"
            :style="'width:' + width"
            :class="type"
        >
            <slot></slot>
            <fugger-icons
                class="fug-icon"
                :name="iconname"
                :width="iconname === 'card-next-icon' ? 30 : 20"
                :height="iconname === 'card-next-icon' ? 30 : 20"
                :primary="theme === 'dark'"
            />
        </button>

        <button v-if="type === 'quote-btn'" :class="type">
            <slot></slot>
            <fugger-icons name="arrow-next-icon" :primary="theme === 'light'" />
        </button>

        <button
            v-if="type === 'play-pause-btn'"
            :style="'width:' + width"
            class="btn btn-primary"
            :class="[type, active]"
        >
            <slot></slot>
            <fugger-icons
                v-if="active"
                name="card-next-icon"
                :primary="theme === 'light'"
            />
            <fugger-icons
                v-else
                name="pause-icon"
                :primary="theme === 'light'"
            />
        </button>

        <button
            v-if="type === 'next-btn'"
            :style="'width:' + width"
            class="btn btn-primary"
            :class="type"
        >
            <slot></slot>
            <fugger-icons name="arrow-next-icon" :primary="theme === 'light'" />
        </button>

        <button
            v-if="type === 'prev-btn'"
            :style="'width:' + width"
            class="btn btn-primary"
            :class="type"
        >
            <slot></slot>

            <fugger-icons name="arrow-prev-icon" :primary="theme === 'light'" />
        </button>

        <button
            v-if="type === 'forward-btn'"
            :style="'width:' + width"
            class="btn btn-primary square-btn-drop-shadow"
            :class="type"
        >
            <slot></slot>

            <fugger-icons name="forward-icon" :primary="theme === 'light'" />
        </button>

        <button
            v-if="type === 'backward-btn'"
            :style="'width:' + width"
            class="btn btn-primary square-btn-drop-shadow"
            :class="type"
        >
            <slot></slot>
            <fugger-icons name="backward-icon" :primary="theme === 'light'" />
        </button>

        <button
            v-if="type === 'back-btn'"
            :style="'width:' + width"
            class="btn btn-primary"
            :class="type"
        >
            <slot></slot>
            <fugger-icons name="back-icon" :primary="theme === 'light'" />
        </button>

        <button
            v-if="type === 'nav-btn'"
            :style="'width:' + width"
            class="btn btn-primary"
            :class="type"
        >
            <label
                class="right-btn-box d-flex justify-content-start align-items-center"
            >
                <slot></slot>
            </label>
            <span
                v-if="active"
                class="position-absolute left-btn-box"
                @click="$emit('activeiconclick')"
            >
                <fugger-icons name="close-icon" :primary="theme === 'light'" />
            </span>
            <span
                v-else
                class="position-absolute left-btn-box"
                @click="$emit('iconclick')"
            >
                <span v-if="langcode" class="langcode">
                    {{ langcode }}
                </span>

                <fugger-icons
                    v-else
                    :name="iconname"
                    :primary="theme === 'light'"
                />
            </span>
        </button>

        <button
            v-if="type === 'overview-btn'"
            :style="'width:' + width"
            class="btn btn-primary"
            :class="type"
        >
            <div class="label"><slot></slot></div>
            <fugger-icons name="overview-icon" :primary="theme === 'light'" />
        </button>

        <button
            v-if="type === 'zoom-btn'"
            :style="'width:' + width"
            class="btn btn-primary"
            :class="type"
        >
            <div class="label" @click="$emit('goback')"><slot></slot></div>
            <fugger-icons name="zoom-icon" :primary="theme === 'light'" />
        </button>

        <button
            v-if="type === 'arrow-btn'"
            :style="'width:' + width"
            class="btn btn-primary"
            :class="type"
        >
            <slot></slot>
            <span class="position-absolute">
                <svg
                    id="icons"
                    class="filled"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 100 100"
                >
                    <path d="M36.5,69.5V31.3L66.58,50.4Z" />
                </svg>
            </span>
        </button>

        <button
            v-if="type === 'close-btn'"
            :style="'width:' + width"
            class="btn btn-primary"
            :class="type"
        >
            <slot></slot>
            <fugger-icons name="close-icon" :primary="theme === 'light'" />
        </button>

        <button
            v-if="type === 'toggle-btn'"
            :style="'width:' + width"
            :class="type"
            class="nav-btn btn btn-primary"
        >
            <slot></slot>
            <span class="position-absolute">
                <fugger-icons
                    v-if="active"
                    name="close-icon"
                    :primary="theme === 'light'"
                />
                <fugger-icons
                    v-else
                    name="menu-icon"
                    :primary="theme === 'light'"
                />
            </span>
        </button>

        <button
            v-if="type === 'menulink-btn'"
            :style="'width:' + width"
            class="btn btn-primary"
            :class="[type, iconpos]"
        >
            <div class="label"><slot></slot></div>

            <fugger-icons :name="iconname" :primary="theme === 'light'" />
        </button>

        <button
            v-if="type === 'poi-btn'"
            :style="'width:' + width"
            class="btn btn-primary"
            :class="type"
        >
            <svg class="filled" viewBox="0 0 100 100">
                <path d="M36.5,69.5V31.3L66.58,50.4Z" />
            </svg>

            <div class="point-label">
                <div class="transparent"></div>
                <div class="corners">
                    <span class="circle-helper">
                        <span class="circle" />
                    </span>
                </div>
                <div class="label pr-4">
                    <slot><p>Frauenvorstadt</p></slot>
                </div>
            </div>
        </button>
    </span>
</template>

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

export default {
    name: 'FuggerButton',
    components: {
        FuggerIcons,
    },
    props: {
        active: {
            type: Boolean,
            default: false,
        },
        langcode: {
            type: String,
            default: null,
        },
        type: {
            type: String,
            default: 'normal-btn',
        },
        theme: {
            type: String,
            default: 'dark',
        },
        width: {
            type: String,
            default: 'auto',
        },
        iconname: {
            type: String,
            default: '',
        },
        iconpos: {
            type: String,
            default: 'left',
        },
        callback: {
            type: String,
            default: '',
        },
    },
    methods: {
        clickedButton(type) {
            if (this.callback !== '') {
                eventbus.$emit('customCallBack', this.callback)
            } else {
                eventbus.$emit('clickedButton', type)
            }
            this.$emit('click')
            console.log('click', type)
        },
    },
}
</script>

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

button {
    position: relative;
    font-weight: 500;
    min-width: calc(150vw * var(--pxToVw));
    padding: calc(10vw * var(--pxToVw));
    background: transparent !important;

    span {
        position: absolute;
    }
}

.normal-btn {
    min-width: calc(250vw * var(--pxToVw));
    padding: calc(10vw * var(--pxToVw));
    margin-bottom: calc(10vw * var(--pxToVw));
}

.arrow-btn {
    padding-right: calc(10vw * var(--pxToVw));
    margin-bottom: calc(10vw * var(--pxToVw));

    span {
        right: 0;
        top: 0;
        width: calc(40vw * var(--pxToVw));
        height: calc(40vw * var(--pxToVw));
    }
}

.play-pause-btn {
    text-align: left;
    min-width: calc(80vw * var(--pxToVw));
    padding: calc(10vw * var(--pxToVw));
    height: calc(80vw * var(--pxToVw));
    background: var(--primary) !important;
    position: absolute;
    border-radius: 50%;
    right: 0;
    top: 0;

    span {
        width: calc(40vw * var(--pxToVw));
        height: calc(40vw * var(--pxToVw));
        right: calc(20vw * var(--pxToVw));
        bottom: calc(20vw * var(--pxToVw));
        z-index: 999;
        border-radius: 50%;
        background-color: #fff;

        svg.filled {
            fill: var(--primary);
        }
    }
}

.card-btn {
    text-align: left;
    min-width: calc(200vw * var(--pxToVw));
    padding: 10px;
    height: calc(140vw * var(--pxToVw));
    background: var(--primary) !important;

    span {
        width: calc(40vw * var(--pxToVw));
        height: calc(40vw * var(--pxToVw));
        right: calc(20vw * var(--pxToVw));
        bottom: calc(20vw * var(--pxToVw));
        z-index: 999;
        border-radius: 50%;
        background-color: var(--primary);
    }

    p {
        color: var(--primary);
    }
}

.format_movie {
    span {
        background-color: #fff;
    }

    p {
        color: #fff;
    }
}

.quote-btn {
    height: calc(74.5vw * var(--pxToVw));
    width: calc(433vw * var(--pxToVw));
    background: var(--primary) !important;
    padding-left: calc(50vw * var(--pxToVw));

    span {
        width: calc(80vw * var(--pxToVw));
        height: calc(80vw * var(--pxToVw));
        right: 0;
        background-color: transparent;
        bottom: 50%;
        transform: translateY(50%);
        z-index: 999;
        border-radius: 50%;

        svg.filled {
            fill: var(--primary);
        }
    }
}

.m07 {
    .card-btn {
        height: calc(132vw * var(--pxToVw));
        width: calc(190vw * var(--pxToVw)) !important;
    }
}

.button-wrap {
    transition: all 0.3s linear;

    &.active {
        transition: all 0.3s linear;

        button:not(.nav-btn) {
            background: var(--primary-active) !important;
            color: white;
        }

        .label {
            background-color: transparent !important;
        }
    }

    &.light {
        button:not(.nav-btn) {
            background: white !important;
            color: var(--primary);

            span {
                svg path,
                svg.filled path {
                    fill: var(--primary) !important;
                }
            }
        }

        label,
        .label {
            background: white !important;
            color: var(--primary);
        }

        span {
            //background-color: var(--primary);

            svg path,
            svg.filled path {
                fill: var(--primary) !important;
            }
        }
    }
}

/* slider-next */
.next-btn,
.prev-btn,
.forward-btn,
.backward-btn,
.back-btn {
    min-width: 100%;
    height: 100%;
    padding: 100%;

    span {
        //width: 40vw * $pxToVw;
        //height: 40vw * $pxToVw;
        width: 100%;
        height: 100%;
        right: 0;
        bottom: 0;
        z-index: 999;

        svg.filled {
            fill: var(--primary) !important;
        }
    }
}

.forward,
.backward {
    width: calc(80vw * var(--pxToVw));
    height: calc(80vw * var(--pxToVw));
    float: left;
    display: inline-block;
    filter: drop-shadow(0px -2.66667px 10.6667px rgba(0, 0, 0, 0.15));
}

.forward-btn,
.backward-btn {
    width: calc(80vw * var(--pxToVw)) !important;
    height: calc(80vw * var(--pxToVw)) !important;

    position: relative;
    background-color: white;

    span {
        width: calc(40vw * var(--pxToVw));
        height: calc(40vw * var(--pxToVw));
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);

        svg {
            fill: var(--primary);
        }
    }
}

.language-btn,
.zoom-btn,
.menulink-btn,
.overview-btn,
.toggle-btn,
.nav-btn {
    padding-left: calc(100vw * var(--pxToVw));
    width: 100% !important;
    margin: 0;
    height: 100%;
    text-align: left;
    overflow: hidden;
    transition: all 0.3s linear;

    label {
        padding-left: 100px;
    }

    &:active {
        background-color: var(--primary) !important;
        color: white !important;

        transition: all 0.3s linear;
    }

    span {
        left: 0;
        top: 0;
        width: calc(80vw * var(--pxToVw));
        margin: 0;
        height: 100%;
        transition: all 0.3s linear;

        &:active {
            transition: all 0.3s linear;
            background-color: var(--primary);
            color: white;

            svg {
                fill: white;
            }
        }

        svg {
            top: 50%;
            width: calc(40vw * var(--pxToVw));
            left: 50%;
            position: absolute;
            transform: translateX(-50%) translateY(-50%);
            fill: var(--primary);
        }
    }

    position: relative;
    border: none;
    color: var(--primary) !important;
    background: #fff !important;
    float: left;
    font-weight: 500;

    .icon svg {
        width: calc(40vw * var(--pxToVw));
    }
}

.nav-btn {
    font-weight: 900 !important;
}

.language-btn {
    padding-left: 0;
    height: calc(80vw * var(--pxToVw));
    margin-bottom: calc(2vw * var(--pxToVw));

    label {
        text-align: left;
        font-size: calc(32vw * var(--pxToVw));
        font-weight: 700;
        padding: 0 calc(80vw * var(--pxToVw)) 0 calc(60vw * var(--pxToVw));
        margin-top: calc(4vw * var(--pxToVw));
        margin-bottom: 0;
    }
}

.activelang {
    .language-btn {
        padding-left: 0;
        height: calc(80vw * var(--pxToVw));
        margin-bottom: calc(2vw * var(--pxToVw));

        background-color: var(--primary) !important;

        label {
            color: white !important;
        }
    }
}

.toggle-btn {
    z-index: 1111 !important;
    filter: drop-shadow(0px -2.66667px 10.6667px rgba(0, 0, 0, 0.15));
}

.nav-btn {
    background: none !important;

    span {
        background-color: white;
    }

    label {
        //padding-left: 0px;
        height: 100%;
        width: 100%;
        position: absolute;
        left: calc(82vw * var(--pxToVw));
        padding-left: calc(15vw * var(--pxToVw));
        top: 0;
        margin: 0;

        h5 {
            margin: 0;
            padding: 0;
            font-size: calc(32vw * var(--pxToVw));
        }
    }
}

button.close-btn {
    position: relative;
    min-width: calc(100vw * var(--pxToVw));
    padding: 0;
    width: calc(100vw * var(--pxToVw));
    height: calc(100vw * var(--pxToVw));

    span {
        position: absolute;

        svg {
            top: 50%;
            width: calc(40vw * var(--pxToVw));
            left: 50%;
            position: absolute;
            transform: translateX(-50%) translateY(-50%);
            fill: var(--primary);
        }
    }

    border: none;
    color: var(--primary) !important;
    background: #fff !important;
    float: left;
    font-weight: 500;
}

button.back-btn {
    left: unset;
    top: unset;
}

/* */
.zoom-btn,
.menulink-btn,
.overview-btn {
    padding: 0 calc(80vw * var(--pxToVw)) 0 0;
    height: calc(80vw * var(--pxToVw));

    .label {
        padding: 0 calc(20vw * var(--pxToVw));
        text-align: left;
        position: relative;
        float: left;
        height: 100%;
        background-color: var(--primary);
        color: #fff;
        line-height: calc(80vw * var(--pxToVw));
    }

    span {
        right: 0;
        left: unset;
        top: 0;
        width: calc(80vw * var(--pxToVw));
        height: calc(80vw * var(--pxToVw));
        border: none;

        svg {
            position: absolute;
            top: 50%;
        }
    }
}

.zoom-btn {
    background: transparent !important;
    padding-right: calc(82vw * var(--pxToVw)) !important;

    label {
        padding: 0 calc(80vw * var(--pxToVw)) 0 0;
    }

    span {
        right: 0;
        position: absolute;
        background: #fff;
    }
}

.overview-btn {
    padding: 0 0 0 calc(80vw * var(--pxToVw)) !important;
    background: var(--primary) !important;

    label {
    }

    span {
        left: 0;

        svg {
            fill: white;
        }
    }
}

.back-btn {
    padding: 0 0 0 calc(80vw * var(--pxToVw));
    height: calc(80vw * var(--pxToVw));

    .label {
        padding: 0 calc(20vw * var(--pxToVw)) 0 calc(80vw * var(--pxToVw));
        text-align: left;
        position: relative;
        float: left;
        height: 100%;
        background-color: var(--primary);
        color: #fff;
        line-height: calc(80vw * var(--pxToVw));
    }

    span {
        left: 0;
        top: 0;
        width: calc(80vw * var(--pxToVw));
        height: calc(80vw * var(--pxToVw));
        border: none;

        svg {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
    }
}

.menulink-btn {
    padding: 0 0 0 calc(80vw * var(--pxToVw));
    height: calc(80vw * var(--pxToVw));
    margin-bottom: calc(2vw * var(--pxToVw)) !important;
    background: none !important;
    white-space: nowrap;

    .label {
        width: 100% !important;
        white-space: nowrap;
    }

    &.left {
        .label {
            padding: 0 calc(20vw * var(--pxToVw)) 0 calc(80vw * var(--pxToVw));
        }

        span {
            right: unset !important;
            left: 0 !important;
        }
    }

    &.right {
        .label {
            padding: 0 calc(80vw * var(--pxToVw)) 0 calc(20vw * var(--pxToVw));
        }

        span {
            right: 0 !important;
            left: unset !important;
        }
    }
}

.langcode {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}

button.close-btn {
    width: calc(140vw * var(--pxToVw)) !important;
    height: calc(140vw * var(--pxToVw)) !important;

    .close-icon {
        width: 100% !important;
        height: 100% !important;
        left: 0;
        top: 0;
    }
}
</style>
