<template>
    <v-expand-transition>
        <cs-basic-card
            v-if="messageBox.visible"
            :outlined="true"
            :style="messageBox.htmlStyle"
            :elevation="40"
            :color="messageBox.color"
            :titleHtmlClass="messageBox.titleHtmlClass"
        >
            <template #icon
                v-if="messageBox.icon"
            >
                <cs-image 
                    :src="$url + messageBox.icon"
                    :height="32"
                    :width="32"
                    class="mr-2"
                />
            </template>

            <template #title
                v-if="messageBox.caption"
            >
                <span class="pl-2">{{ __(messageBox.caption) }}</span>
            </template>

            <template #titleright>
                <cs-btn-cancel 
                    :form="messageBox"
                    :caption="null"
                    position="bottom"
                    :outlined="false"
                    tooltip="Renunță"
                    :color="messageBox.color"
                />
            </template>
           
            <v-sheet
                tile
                :height="messageBox.absoluteHeight - 108"
                class="overflow-y-auto"
            >
                <v-card-text 
                    :class="[messageBox.color + '--text']"
                >
                    <div
                        v-for="(message, index) in messageBox.messages"
                        :key="'message-' + index"
                        class="mb-2"
                    >
                        {{ __(message) }}
                    </div>
                </v-card-text>
            </v-sheet>

            <template #actions>
                <template
                    v-for="(btn, index) in messageBox.buttons"
                >
                    <cs-btn 
                        :key="'button-' + index"
                        outlined
                        position="top"
                        :caption="btn.caption"
                        :color="btn.color"
                        :icon="btn.icon"
                        :tooltip="btn.tooltip"

                        :click="() => btn.click()"
                    />

                    <span
                        :key="'spacer-' + index"
                    >
                        &nbsp;
                    </span>
                </template>

                <v-spacer></v-spacer>
                
                <cs-btn-cancel 
                    :form="messageBox"
                    tooltip="Renunță"
                    position="top"
                />
            </template>
            
        </cs-basic-card>
    </v-expand-transition>
</template>

<script>
    export default {
        props: {
            messageBox: {required: true},
        },

        components: {
            CsBasicCard: require('./CsBasicCard').default,
            CsImage: require('./../images/CsImage').default,
            CsBtn: require('./../buttons//CsBtn').default,
            CsBtnCancel: require('./../buttons//CsBtnCancel').default,
        },
        
        name: 'CsMessageBox'
    }
</script>