<template>
    <div id="slider-controller" class="slider-controls">
        <div
            v-if="slidesNumber > slidesToShowScroll"
            class="slider-controls-inner"
        >
            <!--      v-show="!disableArrows && slideCurrentIndex !== 1"-->
            <div
                :class="{
                    disabled: slideCurrentIndex === 1 && !loop,
                }"
                class="slide-arrow prev arrow-prev"
                @click="$emit('prev')"
            >
                <fugger-button theme="light" type="prev-btn" />
            </div>
            <ul class="slick-dots">
                <li
                    v-for="i in Math.ceil(slidesNumber / slidesToShowScroll)"
                    :key="'slide-item-' + i"
                    :class="{ 'slick-active': i === slideCurrentIndex }"
                ></li>
            </ul>
            <div
                :class="{
                    disabled:
                        slideCurrentIndex >=
                            Math.ceil(slidesNumber / slidesToShowScroll) &&
                        !loop,
                }"
                class="slide-arrow next arrow-next"
                @click="$emit('next')"
            >
                <fugger-button theme="light" type="next-btn" />
            </div>
        </div>
        <div v-if="infotext" class="slider-infotext text-center">
            <p class="p1" v-html="infotext" />
        </div>
    </div>
</template>

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

export default {
    name: 'SliderNavigation',
    components: {
        FuggerButton,
    },
    props: {
        slidesNumber: {
            type: Number,
            default: 5,
        },
        slideCurrentIndex: {
            type: Number,
            default: 1,
        },
        slidesToShowScroll: {
            type: Number,
            default: 1,
        },
        hideArrows: {
            type: Boolean,
            default: false,
        },
        disableArrows: {
            type: Boolean,
            default: false,
        },
        infotext: {
            type: String,
            default: '',
        },
        loop: {
            type: Boolean,
            default: false,
        },
    },
}
</script>

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

.slider-controls {
    margin-top: calc(20vw * var(--pxToVw));
    position: absolute;
    top: calc(770vw * var(--pxToVw));
    left: 50%;
    &.m07 {
        top: calc(1824vw / 2 * var(--pxToVw));
        left: calc(404.5vw * var(--pxToVw));
    }
    &.m14 {
        top: calc(1635vw * var(--pxToVw));
        left: 50%;
    }
    &.m14-answer {
        margin-top: calc(0vw * var(--pxToVw));
        top: unset;
        bottom: calc(-97vw * var(--pxToVw));
        left: unset;
        right: calc(90vw * var(--pxToVw));
        transform: translateX(0%);
        align-items: right;
    }
    &.m13 {
        position: absolute;
        top: calc(1649vw * var(--pxToVw));
        left: 50%;
    }
    transform: translateX(-50%);
    z-index: 9;
    display: inline-table;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .slider-controls-inner {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
    }

    .slide-arrow {
        cursor: pointer;
        filter: drop-shadow(
            calc(0vw * var(--pxToVw)) calc(2vw * var(--pxToVw))
                calc(8vw * var(--pxToVw)) rgba(0, 0, 0, 0.15)
        );
        width: calc(80vw * var(--pxToVw));
        height: calc(80vw * var(--pxToVw));
        background-color: white;
        display: flex;
        justify-content: center;
        align-content: center;
        justify-items: center;
        transition: all 0.3s linear;

        &.disabled {
            opacity: 0.6;
            transition: all 0.3s linear;
            pointer-events: none;
            color: var(--btn-font-color-disabled);
            button.btn {
                span {
                    svg.filled path {
                        fill: $gray !important;
                    }
                }
            }
        }

        span {
            display: inline-block;
            position: absolute;
            //width: 40vw * $pxToVw;
            //height: 40vw * $pxToVw;
            width: 100%;
            height: 100%;
            top: 50% !important;
            left: 50% !important;
            transform: translateX(-50%) translateY(-50%);

            button {
                position: absolute;
            }
        }
    }

    .slick-dots,
    .arrow-prev,
    .arrow-next {
        float: left;
    }

    .slick-dots {
        list-style: none;
        position: relative;
        display: block;
        text-align: center;
        float: left;
        padding: 0px;
        width: auto;
        margin: calc(10vw * var(--pxToVw)) calc(50vw * var(--pxToVw));

        li {
            width: calc(20vw * var(--pxToVw));
            height: calc(20vw * var(--pxToVw));
            margin: 0 calc(10vw * var(--pxToVw));
            float: left;
            background-color: var(--primary);
            opacity: 0.5;
        }

        .slick-active {
            opacity: 1;
        }
    }
    .slider-infotext {
        background-color: white;
        display: block;
        position: relative;
        top: calc(2vw * var(--pxToVw));
        padding: calc(30vw * var(--pxToVw));
        margin: 0;
        max-width: fit-content;
        min-width: calc(345vw * var(--pxToVw));
        left: 50%;
        transform: translateX(-50%);

        p {
            margin: 0;
        }
    }
}

.m14-answer,
.m14 {
    .slider-controls-inner {
        .slick-dots {
            margin: calc(10vw * var(--pxToVw)) calc(10vw * var(--pxToVw)) !important;
        }
    }
}
</style>
