<template>
    <transition-group name="modal">
        <div class="modal-mask" @click="$emit('hide')" key="1"></div>
        <div class="modal-container" key="2">
            <h1>{{ title }}</h1>
            <div class="content">
                <slot></slot>
            </div>
            <div class="footer">
                <div v-if="cancelButton" class="button cancel" @click="$emit('hide')">Cancel</div>
                <div v-if="detailText" class="item">{{ detailText }}</div>
                <div v-if="!successInProgress" class="button success" @click="$emit('success')">{{ successText }}</div>
                <div v-else class="button success">
                    <div class="loading">
                        <img :src="loadingSrc">
                    </div>
                </div>
            </div>
        </div>
    </transition-group>
</template>

<script>
    import LoadingSvg from '../../img/throbber-grey.svg'


    export default {
        props: {
            title: {
                type: String,
                required: true
            },
            successText: {
                type: String,
                required: true
            },
            detailText: {
                type: String,
                required: false
            },
            successInProgress: {
                type: Boolean
            },
            cancelButton: {
                type: Boolean,
                default: true
            }
        },
        computed: {
            loadingSrc() {
                return LoadingSvg;
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../scss/constants";
    @import "../../scss/mixins";


    .modal-mask {
        position: fixed;
        z-index: 9998;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
        display: table;
        @include transition(0.3s);
    }

    .modal-container {
        position: fixed;
        z-index: 9999;
        top: 10%;
        width: 700px;
        left: 50%;
        margin-left: -350px;
        background-color: $lightGrey;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: $darkGrey;
        max-height: 80vh;
        @include transition(0.3s);
        @include box-shadow(0, 1px, 16px, rgba(0, 0, 0, 0.19));
    }

    h1 {
        text-align: center;
        font-size: 15px;
        font-weight: 500;
        margin: 15px;
        flex-shrink: 0;
    }

    .content {
        flex-grow: 1;
        overflow: auto;
    }

    .footer {
        border-top: 1px solid $midGrey;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        flex-shrink: 0;

        .button, .item {
            flex-grow: 1;
            display: inline-block;
            padding: 10px;
            text-align: center;
            border-left: 1px solid $midGrey;
            font-size: 14px;

            &.button {
                font-family: "aktiv-grotesk", sans-serif;
                text-transform: uppercase;
                cursor: pointer;
            }

            &.item {
                font-family: Lato, sans-serif;
                font-style: italic;
            }

            &:first-of-type {
                border-left: 0;
            }

            .loading {
                width: 15px;
                display: inline-block;
            }
        }
    }
</style>

<style lang="scss">

</style>