<template>
    <v-dialog v-model="modal" width="40%" transition="slide-x-transition">
        <v-card class="RTL">
            <v-card-title class="red lighten-5" primary-title>
                <WM-PartTitle
                    class="WM-Margin-T-20"
                    :TitleFa="getAlertProperties.title || defaultMessage[type].title"
                    :TitleEn="getAlertProperties.titleEn || defaultMessage[type].titleEn"
                    :Color="getAlertProperties.color || defaultMessage[type].color"
                ></WM-PartTitle>
            </v-card-title>
            <v-card-text>
                <div class="WM-Align-R WM-Margin-T-10">{{ getAlertProperties.message || defaultMessage[type].message }}</div>
            </v-card-text>

            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn :color="getAlertProperties.cancelButtonColor || defaultMessage[type].cancelButtonColor" @click="cancel" depressed dark>
                    <v-icon dark right>fas fa-times</v-icon>
                    {{getAlertProperties.cancelButtonText || defaultMessage[type].cancelButtonText}}
                </v-btn>
                <v-btn :color="getAlertProperties.confirmButtonColor || defaultMessage[type].confirmButtonColor" depressed dark @click="confirm">
                    <v-icon dark right>fas fa-trash-alt</v-icon>
                    {{getAlertProperties.confirmButtonText || defaultMessage[type].confirmButtonText}}
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
export default {
    data: () => ({
        defaultMessage: {
            delete: {
                onConfirm: function() {
                    return "";
                },
                onCancel: function() {
                    return "";
                },
                message:
                    "آیا از حذف آیتم مطمئن هستید؟ امکان بازگشت وجود نخواهد داشت.",
                title: " تایید حذف ",
                titleEn: " Remove Confirmation ",
                color: "red",
                cancelButtonText: "انصراف",
                confirmButtonText: "حذف",
                cancelButtonColor: "cyan",
                confirmButtonColor: "red"
            },
        },
        type: 'delete'
    }),
    watch: {
        getAlertType(type) {
            if (["delete"].includes(type)) {
                this.type = type;
            } else {
                this.type = "delete";
            }
        }
    },
    computed:{
        ...mapGetters('modal', ['getAlertType', 'getAlertProperties', 'isModal']),
        modal: {
            get() {
                return this.isModal("modal/alert");
            },
            set(value) {
                if (value) {
                    this.openModal("modal/alert");
                } else {
                    this.closeModal("modal/alert");
                }
            }
        }
    },
    methods: {
        ...mapActions('modal', ['closeModal']),
        async confirm() {
            
            if(typeof this.getAlertProperties.onConfirm == 'function') {
                await this.getAlertProperties.onConfirm();
            }
            this.closeModal('modal/alert');
        },
        async cancel() {
            if(typeof this.getAlertProperties.onCancel == 'function') {
                await this.getAlertProperties.onCancel();
            }
            this.closeModal('modal/alert');
        }
    }
};
</script>
