<template>
    <j-modal-raw v-model="visible"
                 :overlay="overlay"
                 :overlay-capacity="overlayOpacity"
                 :border-css="borderCss"
                 :margin="margin"
                 :close-on-click="closeOnClick"
                 :close-on-escape="closeOnEscape"
                 :transition="transition"
                 :max-height="maxHeight"
                 @show="onShow"
                 @showing="onShowing"
                 @hide="onHide"
                 @hiding="onHiding">
        <div class="modal-with-header-box">
            <div class="d-flex align-items-center flex-wrap modal-with-header-box-header">
                <div class="flex-grow-1">
                    <slot name="header"></slot>
                </div>
                <div v-show="showCloseButton">
                    <button type="button"
                            class="close align-middle h-100"
                            @click="$emit('input', false)"
                            :style="closeButtonStyles">
                        <span aria-hidden="true"
                              class="align-middle">&times;</span>
                    </button>
                </div>
            </div>
            <div class="modal-with-header-container">
                <slot></slot>
            </div>
        </div>
    </j-modal-raw>
</template>
<script>
import { guid } from "libj-core";
export default {
    props: {
        value: {
            type: Boolean,
            value: false
        },
        overlay: {
            type: Boolean,
            default: true
        },
        overlayOpacity: {
            type: Number,
            default: 0.4
        },
        borderCss: {
            type: String,
            default: "1px solid dodgerblue"
        },
        margin: {
            type: String,
            default: "10%" //e.g: 10px, 5%
        },
        closeOnClick: {
            type: Boolean,
            default: true
        },
        closeOnEscape: {
            type: Boolean,
            default: true
        },
        // fade, bounce
        transition: {
            type: String,
            default: "fade"
        },
        closeButtonStyles: {
            type: String,
            default: ""
        },
        showCloseButton: {
            type: Boolean,
            default: true
        },
        maxHeight: {
            default: null
        }
    },
    data() {
        return {
            btnCloseId: guid.newId(),
            visible: this.value
        };
    },
    methods: {
        onShow() {
            this.$emit("show");
        },
        onShowing(args) {
            this.$emit("showing", args);
        },
        onHide() {
            this.$emit("hide");
        },
        onHiding(args) {
            this.$emit("hiding", args);
        }
    },
    watch: {
        value() {
            this.visible = this.value;
            this.$emit("input", this.visible);
        },
        visible() {
            this.$emit("input", this.visible);
        }
    }
};
</script>