<template>
    <div id="app">
        <AddItemModal v-if="addItemModalOpen && isLoggedIn" @close="closeAddItemModal()" isModal="true"/>
        <AddTicketModal v-if="addTicketModalOpen && isLoggedIn" @close="closeAddTicketModal()" isModal="true"/>
        <AddBoxModal v-if="showAddBoxModal && isLoggedIn" @close="closeAddBoxModal()" isModal="true"/>
        <Navbar v-if="isLoggedIn" @addItemClicked="openAddItemModal()" @addTicketClicked="openAddTicketModal()"/>
        <router-view/>
        <div aria-live="polite" aria-atomic="true" v-if="isLoggedIn"
             class="d-flex justify-content-end align-items-start fixed-top mx-1 my-5 py-3"
             style="min-height: 200px; z-index: 100000; pointer-events: none">
            <Toast v-for="(toast , index) in toasts" :key="index" :title="toast.title" :message="toast.message"
                   :color="toast.color"
                   @close="removeToast(toast.key)" style="pointer-events: auto"/>
        </div>
    </div>
</template>

<script>
import Navbar from '@/components/Navbar';
import AddItemModal from '@/components/AddItemModal';
import Toast from './components/Toast';
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex';
import AddTicketModal from "@/components/AddTicketModal.vue";
import AddBoxModal from "@/components/AddBoxModal.vue";

export default {
    name: 'app',
    components: {AddBoxModal, Toast, Navbar, AddItemModal, AddTicketModal},
    computed: {
        ...mapState(['loadedItems', 'layout', 'toasts', 'showAddBoxModal']),
        ...mapGetters(['isLoggedIn']),
    },
    data: () => ({
        addItemModalOpen: false,
        addTicketModalOpen: false,
        notify_socket: null,
        socket_toast: null,
    }),
    methods: {
        ...mapMutations(['removeToast', 'createToast', 'closeAddBoxModal', 'openAddBoxModal']),
        ...mapActions(['loadEventItems', 'loadTickets']),
        openAddItemModal() {
            this.addItemModalOpen = true;
        },
        openAddTicketModal() {
            this.addTicketModalOpen = true;
        },
        closeAddItemModal() {
            this.addItemModalOpen = false;
        },
        closeAddTicketModal() {
            this.addTicketModalOpen = false;
        },
        tryConnect() {
            if (!this.notify_socket || this.notify_socket.readyState !== WebSocket.OPEN) {
                //if (this.socket_toast) {
                //    this.removeToast(this.socket_toast.key);
                //    this.socket_toast = null;
                //}
                //this.socket_toast = this.createToast({
                //    title: "Connecting...",
                //    message: "Connecting to websocket...",
                //    color: "warning"
                //});
                const scheme = window.location.protocol === "https:" ? "wss" : "ws";
                this.notify_socket = new WebSocket(scheme + '://' + window.location.host + '/ws/2/notify/');
                this.notify_socket.onopen = (e) => {
                    //if (this.socket_toast) {
                    //    this.removeToast(this.socket_toast.key);
                    //    this.socket_toast = null;
                    //}
                    //this.socket_toast = this.createToast({
                    //    title: "Connection established",
                    //    message: JSON.stringify(e),
                    //    color: "success"
                    //});
                    //console.log(e);
                };
                this.notify_socket.onclose = (e) => {
                    //if (this.socket_toast) {
                    //    this.removeToast(this.socket_toast.key);
                    //    this.socket_toast = null;
                    //}
                    //this.socket_toast = this.createToast({
                    //    title: "Connection closed",
                    //    message: JSON.stringify(e),
                    //    color: "danger"
                    //});
                    //console.log(e);
                    setTimeout(() => {
                        this.tryConnect();
                    }, 1000);
                };
                this.notify_socket.onerror = (e) => {
                    //if (this.socket_toast) {
                    //    this.removeToast(this.socket_toast.key);
                    //    this.socket_toast = null;
                    //}
                    //this.socket_toast = this.createToast({
                    //    title: "Connection error",
                    //    message: JSON.stringify(e),
                    //    color: "danger"
                    //});
                    //console.log(e);
                    setTimeout(() => {
                        this.tryConnect();
                    }, 1000);
                };
                this.notify_socket.onmessage = (e) => {
                    let data = JSON.parse(e.data);
                    this.loadEventItems()
                    this.loadTickets()
                }
            }
        },
    },
    created: function () {
        this.tryConnect();
    }
};
</script>

<style>
body, html, #app {
    background: #000;
}
</style>

