<template>
    <div
        v-if="getLabel.length > 0"
        id="range-slider"
        class="range-slider"
        :class="{ slidedown: slideDown }"
    >
        <div class="current-value">
            <div class="current-value-inner">
                <h5>
                    {{ getInterfaceText('century_slider_description') }}
                </h5>
                <h3>
                    {{ getCentury }}.
                    {{ getInterfaceText('century_slider_century') }}
                </h3>
                <p class="p-0 m-0 p1">{{ getCenturySubLabel }}</p>
            </div>
        </div>
        <vue-range-slider
            ref="slider"
            marks
            tooltip="none"
            :data="labels"
            :data-label="'id'"
            :data-value="'name'"
            @change="getRangeValue"
        ></vue-range-slider>
    </div>
</template>

<script>
import VueRangeSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
import { eventbus } from './index'

export default {
    name: 'SliderRange',
    components: {
        VueRangeSlider,
    },
    props: {
        slideDown: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            sliderValue: 0,
            labels: [],
            centuriesLabel: [
                'century_slider_16',
                'century_slider_17',
                'century_slider_18',
                'century_slider_19',
                'century_slider_20',
            ],
            centuriesSubLabel: [
                '1501 – 1600',
                '1601 – 1700',
                '1701 – 1800',
                '1801 – 1900',
                '1901 – 2000',
            ],
        }
    },
    computed: {
        getIndex() {
            if (this.sliderValue === 0) {
                return this.sliderValue
            }
            return this.labels.findIndex(x => x.name === this.sliderValue)
        },
        getLabel() {
            const label = []
            this.centuriesLabel.forEach((text, index) => {
                const labelText = this.getInterfaceText(text)
                if (labelText.search('not found') === -1) {
                    label.push({
                        id: index,
                        name: labelText,
                    })
                }
            })
            if (label.length > 0) {
                this.setLabel(label)
            }
            return label
        },
        getCentury() {
            return this.centuriesLabel[this.sliderValue].slice(-2)
        },
        getCenturySubLabel() {
            return '(' + this.centuriesSubLabel[this.sliderValue] + ')'
        },
    },
    methods: {
        setLabel(label) {
            this.labels = label
        },
        getRangeValue() {
            this.sliderValue = this.$refs.slider.getIndex()
            this.$emit('rangevalue', this.sliderValue)
            eventbus.$emit('rangeslider', this.sliderValue)
        },
    },
}
</script>

<style lang="scss">
@import 'assets/scss/variables';
@import 'assets/scss/buttons';
@import 'assets/scss/global';
#range-slider {
    .vue-slider {
        float: left;
        display: inline-block;
        width: calc(100% - (500vw * var(--pxToVw))) !important;
        position: relative;
        margin-top: calc(26vw * var(--pxToVw));
        padding: 0;
    }

    .vue-slider-rail {
        height: calc(15vw * var(--pxToVw));
        padding: 0 calc(10vw * var(--pxToVw));
        border-radius: 0 !important;

        .vue-slider-mark {
            width: calc(2vw * var(--pxToVw)) !important;
            top: calc(23vw * var(--pxToVw)) !important;
        }

        .vue-slider-dot-handle {
            width: calc(56vw * var(--pxToVw));
            height: calc(66vw * var(--pxToVw));
            background-color: var(--primary);
            transform: none !important;
            top: 50%;
            border-radius: 0 !important;
            position: relative;

            &:after {
                content: '';
                position: absolute;
                background-image: url('./assets/icons/icons_40x40/icon_slider.svg');
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                left: 50%;
                top: 50%;
                color: #fff;
                width: calc(47vw * var(--pxToVw));
                height: 100%;
                font-size: 30px;
                transform: translateX(-50%) translateY(-50%);
            }
        }

        .vue-slider-dot {
            width: auto !important;
            height: auto !important;
        }

        .vue-slider-process {
            border-radius: 0px !important;
            background-color: transparent;
        }

        .vue-slider-mark-label {
            margin-top: calc(15vw * var(--pxToVw));
        }
    }

    .vue-slider-dot-handle,
    .vue-slider-dot-handle-focus {
        box-shadow: none !important;
    }

    .vue-slider-mark:first-child .vue-slider-mark-step,
    .vue-slider-mark:last-child .vue-slider-mark-step {
        display: block;
    }

    .vue-slider-mark-step {
        border-radius: 0;
        background-color: #ccc;
    }
}
</style>
<style lang="scss" scoped>
@import 'assets/scss/variables';
@import 'assets/scss/buttons';
@import 'assets/scss/global';
.range-slider {
    width: 100vw;
    position: absolute;
    display: inline-block;
    left: 50%;
    background-color: white;
    bottom: 0;
    z-index: 900;
    transform: translateX(-50%);
    padding: calc(20vw * var(--pxToVw)) 0;
    height: calc(160vw * var(--pxToVw));
    transition: all 0.3s linear;
    &.slidedown {
        transition: all 0.3s linear;
        transform: translateX(-50%) translateY(100%);
    }
    .current-value {
        float: left;
        position: relative;
        left: 0;
        bottom: 0;
        width: calc(400vw * var(--pxToVw));
        display: block;
        padding: 0 calc(50vw * var(--pxToVw));
        margin-top: calc(8vw * var(--pxToVw));
        text-align: left;

        .current-value-inner {
            h5 {
                margin-bottom: calc(-6vw * var(--pxToVw));
            }
            h3 {
                line-height: calc(52vw * var(--pxToVw));
                margin-bottom: calc(-11vw * var(--pxToVw));
                color: var(--primary);
            }
        }
    }
}
</style>
