<script setup>
const props = defineProps({
    confirmationQuestion: {
        type: String,
        required: true,
    },
    isDialogVisible: {
        type: Boolean,
        required: true,
    },
    confirmTitle: {
        type: String,
        required: true,
    },
    confirmMsg: {
        type: String,
        required: true,
    },
    cancelTitle: {
        type: String,
        required: true,
    },
    cancelMsg: {
        type: String,
        required: true,
    },
});

const emit = defineEmits(["update:isDialogVisible", "confirm"]);

const unsubscribed = ref(false);
const cancelled = ref(false);

const updateModelValue = (val) => {
    emit("update:isDialogVisible", val);
};

const onConfirmation = () => {
    emit("confirm", true);
    updateModelValue(false);
    unsubscribed.value = true;
};

const onCancel = () => {
    emit("confirm", false);
    emit("update:isDialogVisible", false);
    cancelled.value = true;
};
</script>

<template>
    <!-- 👉 Confirm Dialog -->
    <VDialog
        max-width="500"
        :model-value="props.isDialogVisible"
        @update:model-value="updateModelValue"
    >
        <VCard class="text-center px-10 py-6">
            <VCardText>
                <VBtn
                    icon
                    variant="outlined"
                    color="warning"
                    class="my-4"
                    size="x-large"
                >
                    <span class="text-4xl">!</span>
                </VBtn>

                <h6 class="text-lg font-weight-medium">
                    {{ props.confirmationQuestion }}
                </h6>
            </VCardText>

            <VCardText class="d-flex align-center justify-center gap-4">
                <VBtn variant="elevated" @click="onConfirmation">
                    Confirm
                </VBtn>

                <VBtn color="secondary" variant="outlined" @click="onCancel">
                    Cancel
                </VBtn>
            </VCardText>
        </VCard>
    </VDialog>

    <!-- Unsubscribed -->
    <VDialog v-model="unsubscribed" max-width="500">
        <VCard>
            <VCardText class="text-center px-10 py-6">
                <VBtn
                    icon
                    variant="outlined"
                    color="success"
                    class="my-4"
                    size="x-large"
                >
                    <span class="text-xl">
                        <VIcon icon="ri-check-line" />
                    </span>
                </VBtn>

                <h1 class="text-h4 mb-4">
                    {{ props.confirmTitle }}
                </h1>

                <p>{{ props.confirmMsg }}</p>

                <VBtn color="success" @click="unsubscribed = false"> Ok </VBtn>
            </VCardText>
        </VCard>
    </VDialog>

    <!-- Cancelled -->
    <VDialog v-model="cancelled" max-width="500">
        <VCard>
            <VCardText class="text-center px-10 py-6">
                <VBtn
                    icon
                    variant="outlined"
                    color="error"
                    class="my-4"
                    size="x-large"
                >
                    <span class="text-2xl font-weight-light">X</span>
                </VBtn>

                <h1 class="text-h4 mb-4">
                    {{ props.cancelTitle }}
                </h1>

                <p>{{ props.cancelMsg }}</p>

                <VBtn color="success" @click="cancelled = false"> Ok </VBtn>
            </VCardText>
        </VCard>
    </VDialog>
</template>
