<template>
    <div
        v-if="!showMenu"
        class="hidden-menu-btn show-menu d-flex justify-content-center align-items-center"
        @click="showHiddenMenu"
    >
        5x click
    </div>
    <div v-else class="selection w-100 h-100">
        <div
            class="hidden-menu-btn hide-menu d-flex justify-content-center align-items-center bg-danger"
            @click="closeMenu"
        >
            <h2 class="p-0 m-0">X</h2>
        </div>
        <h2 class="h2">Wählen Sie eine Station!</h2>
        <div class="d-flex flex-wrap justify-content-center align-items-center">
            <div
                v-for="(station, i) in data"
                :key="'station-' + i"
                class="p-5 item"
                @click="setStation(station.key)"
            >
                <div class="menu-item d-flex flex-wrap flex-column">
                    <span>Name: {{ station.name }}</span>
                    <span>ID: {{ station.sectionid }}</span>
                    <span>Orientatione: {{ station.orientation }}</span>
                </div>
            </div>
        </div>
        <div class="d-flex flex-wrap justify-content-center mb-5">
            <div class="w-25 mx-3 d-flex flex-column align-items-center">
                <h2 class="h2">Device ID setzen</h2>
                <select
                    v-model="localDeviceId"
                    class="form-select form-select-lg"
                    aria-label="Default select example"
                    @change="setDeviceId"
                >
                    <option
                        v-for="index in 21"
                        :key="'option_' + index"
                        :selected="index - 1 === deviceId ? true : false"
                    >
                        <h3>{{ index - 1 }}</h3>
                    </option>
                </select>
            </div>

            <div class="w-25 mx-3 d-flex flex-column align-items-center">
                <h2 class="h2">Device Room 360 draggable?</h2>
                <input
                    id="checkbox"
                    v-model="deviceDraggable"
                    type="checkbox"
                />
                <label for="checkbox"></label>
            </div>
        </div>
        <div class="d-flex flex-wrap justify-content-center mb-5">
            <div class="w-25 mx-3 d-flex flex-column align-items-center">
                <h2 class="h2">Lokalen Speicher löschen!</h2>
                <div class="menu-item " @click="clearLocalForage">
                    Löschen
                </div>
            </div>

            <div class="w-25 mx-3 d-flex flex-column align-items-center">
                <h2 class="h2">Anwendung neu starten!</h2>
                <div class="menu-item " @click="rebootApp">
                    NEU STARTEN
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { eventbus } from './index'
import * as localforage from 'localforage'

export default {
    name: 'StationMenuSelector',
    props: {
        data: {
            type: Array,
            default: null,
        },
        deviceId: {
            type: Number,
            default: -1,
        },
        showMenu: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            stations: ['M01', 'M02', 'M03', 'M04', 'M05'],
            localDeviceId: this.deviceId,
            clickCount: 0,
            clickTimeout: -1,
            deviceDraggable:
                window.localStorage.getItem('device-draggable') === 'true',
        }
    },
    watch: {
        deviceDraggable(value) {
            this.setDeviceDraggable(value)
        },
    },
    methods: {
        setStation(index) {
            window.localStorage.setItem('fuggerei-station-id', index)
            eventbus.$emit('slectedStationId', index)
            this.$emit('selectedStationId', index)
            this.$router.push({ query: { station: index } })
        },
        setDeviceId() {
            window.localStorage.setItem('device-id', this.localDeviceId)
            this.$emit('selectedDeviceId', this.localDeviceId)
        },
        setDeviceDraggable(value) {
            window.localStorage.setItem('device-draggable', value)
            this.$emit('setDeviceDraggable', value)
        },
        rebootApp() {
            this.$emit('rebootApp')
        },
        clearLocalForage() {
            if (confirm('Wirklich alle Daten Löschen?')) {
                localforage.clear()
            } else {
                return false
            }
        },
        showHiddenMenu() {
            clearTimeout(this.clickTimeout)
            this.clickCount++
            if (this.clickCount === 5) {
                this.$emit('menuToggle', true)
            }
            this.clickTimeout = setTimeout(() => {
                this.clickCount = 0
            }, 1000)
        },
        closeMenu() {
            window.location.reload()
        },
    },
}
</script>

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

.hidden-menu-btn {
    position: absolute;
    width: calc(100vw * var(--pxToVw));
    height: calc(100vw * var(--pxToVw));
    z-index: 20;

    &.show-menu {
        background-color: red;
        right: 0;
        top: 0;
        opacity: 0;
    }

    &.hide-menu {
        left: 0px;
        top: 0px;
        background-color: gray;
    }
}

.selection {
    color: white;
    position: fixed;
    background-color: var(--primary);
    left: 0;
    top: 0;
    z-index: 11111;
    transition: all 0.3s linear;
    padding: calc(160vw * var(--pxToVw));

    .menu-item {
        padding: calc(20vw * var(--pxToVw)) calc(40vw * var(--pxToVw));
        border: 1px solid white;
    }
}

h2,
.h2 {
    font-size: calc(30vw * var(--pxToVw)) !important;
}
</style>
