<template>
    <VEasyDialog
        v-model="showDialog"
        :persistent="persistent"
        :width="modalWidth">
        <div :class="dialogClass">
            <div class="dialog__header" v-if="!!$slots.header">
                <slot name="header">
                </slot>
            </div>
            <div class="dialog__description" v-if="!!$slots.description">
                <slot name="description">
                </slot>
            </div>
            <div class="dialog__body">
                <slot name="body">
                </slot>
            </div>

            <div class="dialog__actions">
                <slot name="actions">
                    <ButtonComponent @click="onCancel" transparent>
                        {{ defaultCancelButtonText }}
                    </ButtonComponent>
                    <ButtonComponent @click="onSubmit" minWidth :disabled="disableSubmitButton">
                        {{ defaultSubmitButtonText }}
                    </ButtonComponent>
                </slot>
            </div>
            <div class="dialog__cross" @click="onCancel">
                <CrossIcon/>
            </div>
        </div>
    </VEasyDialog>

</template>

<script lang="ts">
    import Vue from "vue";
    import VEasyDialog from 'v-easy-dialog';
    import ButtonComponent from '../buttonComponent/ButtonComponent.vue';
    import CrossIcon from '../../components/icons/CrossIcon.vue';
    import {
        DIALOG_CLASS,
        DIALOG_CLASS_SIMPLE,
        DIALOG_EXTRA_LARGE_WIDTH,
        DIALOG_LARGE_WIDTH,
        DIALOG_MEDIUM_WIDTH,
        DIALOG_SIZE_EXTRA_LARGE,
        DIALOG_SIZE_LARGE,
        DIALOG_SIZE_MEDIUM,
        DIALOG_SIZE_SMALL,
        DIALOG_SMALL_WIDTH,
    } from "./constants";

    export default Vue.extend({
        name: "DialogWrapper",
        components: {
            VEasyDialog,
            ButtonComponent,
            CrossIcon,
        },
        props: {
            value: Boolean,
            persistent: {
                type: Boolean,
                default: true,
            },
            disableSubmitButton: {
                type: Boolean,
                default: false,
            },
            defaultSubmitButtonText: {
                type: String,
                default: 'Confirm',
            },
            defaultCancelButtonText: {
                type: String,
                default: 'Cancel',
            },
            size: {
                type: String,
                default: DIALOG_SIZE_MEDIUM,
            },
            simple: {
                type: Boolean,
                default: false,
            },
        },
        computed: {
            showDialog: {
                get(): boolean {
                    return this.value;
                },
                set(value: boolean): void {
                    this.$emit('input', value);
                },
            },
            modalWidth(): string {
                switch (this.size) {
                    case DIALOG_SIZE_SMALL:
                        return DIALOG_SMALL_WIDTH;
                    case DIALOG_SIZE_MEDIUM:
                        return DIALOG_MEDIUM_WIDTH;
                    case DIALOG_SIZE_LARGE:
                        return DIALOG_LARGE_WIDTH;
                    case DIALOG_SIZE_EXTRA_LARGE:
                        return DIALOG_EXTRA_LARGE_WIDTH;
                    default:
                        return DIALOG_SIZE_MEDIUM;
                }
            },
            dialogClass(): object {
                return {
                    [DIALOG_CLASS]: true,
                    [DIALOG_CLASS_SIMPLE]: this.simple,
                };
            },
        },
        methods: {
            onSubmit(): void {
                this.$emit('submit');
            },
            onCancel(): void {
                this.hideDialog();
                this.$emit('cancel');
            },
            hideDialog(): void {
                this.showDialog = false;
            },
        },
    });
</script>

<style scoped lang="scss">
    @import "dialogWrapper";
</style>
