<template>
    <modal
        :ref="ModalName"
        :modalId="ModalName"
        :footerButtonText="ModalCloseButtonText"
        @footer-button-event="footerButtonClick">
        <div :class="[isRecal ? 'recal-modal' : '']">
            <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
            <h5 class="mb-4" v-html="ModalHeadline"></h5>
            <p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
            <p class="mb-0" v-html="ModalBodyText"></p>
            <p
                class="my-4 caption modal-sub-body"
                v-if="ModalSubBodyText"
                v-html="ModalSubBodyText"></p>
            <slot></slot>
        </div>
    </modal>
</template>

<script>
import modal from "@/digital-components/modal/modal";

export default {
    name: "content-group-modal",
    props: {
        cmsWidgetName: String,
        footerButtonActionName: {
            type: String,
            default: null,
        },
        isRecal: Boolean,
    },
    computed: {
        ModalName() {
            return this.cmsWidgetName;
        },
        ModalHeadline() {
            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
        },
        ModalSubheadertext() {
            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
        },
        ModalBodyText() {
            return this.getCmsContent(this.cmsWidgetName, "BodyText");
        },
        ModalSubBodyText() {
            return this.getCmsContent(this.cmsWidgetName, "BodyText2");
        },
        ModalImage() {
            return this.getCmsContent(this.cmsWidgetName, "Image");
        },
        ModalCloseButtonText() {
            return this.getCmsContent(this.cmsWidgetName, "FooterText");
        },
    },
    methods: {
        openModal() {
            this.$refs[this.ModalName].openModal();
        },
        closeModal() {
            this.$refs[this.ModalName].closeModal();
        },
        footerButtonClick() {
            if (this.footerButtonActionName) {
                this.$emit(this.footerButtonActionName, this.ModalName);
            } else {
                this.closeModal();
            }
        },
    },
    components: {
        modal,
    },
};
</script>

<style lang="scss">
.modal {
    &.modal-component {
        .modal-dialog {
            .modal-content {
                .modal-body {
                    .recal-modal {
                        display: flex;
                        flex-direction: column;
                        h5 {
                            text-align: center;
                            line-height: 32px;
                            order: 1;
                        }
                        p {
                            order: 3;
                        }
                        img {
                            order: 2;
                        }
                    }
                    .modal-sub-body {
                        color: $gray-600;
                    }
                    ul {
                        margin-bottom: 0;
                    }
                    p {
                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
    }
}
</style>
