<template>
    <modal
        :id="modalName"
        :name="modalName"
        style="z-index: 1"
        draggable
        resizable
        :clickToClose="false"
        @opened="opened"
        @mousedown="refreshView"
        @closed="closed"
    >
        <v-container fill-height>
            <v-layout row wrap>
                <v-flex xs12>
                    <v-layout justify-space-between>
                        <span class="font-weight-thin title">{{ title }}</span>
                        <v-spacer></v-spacer>
                        <button @click="$modal.hide(modalName)">
                            ❌
                        </button>
                    </v-layout>
                </v-flex>
                <v-flex xs12>
                    <slot></slot>
                </v-flex>
                <v-flex xs12>
                    <v-layout justify-end align-end fill-height>
                        <v-btn color="success" @click="$emit('saved')">Zapisz</v-btn>
                        <v-btn color="error" @click="$modal.hide(modalName)">Anuluj</v-btn>
                    </v-layout>
                </v-flex>
            </v-layout>
        </v-container>
    </modal>
</template>

<script>
    export default {
        props: {
            modalName: {
                required: true
            },
            title: {
                required: true
            }
        },
        computed: {
            modals() {
                return this.$store.getters.getModalsList
            }
        },
        methods: {
            opened() {
                this.$el.querySelector('.v--modal-box').addEventListener('mousedown', this.refreshView);
                this.refreshView();
                this.$emit('opened')
            },
            closed() {
                //this.$el.querySelector('.v--modal-box').removeEventListener('mousedown', this.refreshView, false);
                this.$emit("closed")
            },
            refreshView() {
                for(let modal of this.modals) {
                    if(document.getElementById(modal)) {
                        if(modal == this.$el.id) {
                            document.getElementById(modal).style.zIndex = 2;
                        }
                        else {
                            document.getElementById(modal).style.zIndex = 1;
                        }
                    }
                }
            }
        }
    }
</script>