<template>
    <div class="alert fade show alert-info recal-alert" role="alert">
        <div class="alert-heading">
            <span>
                <img v-if="hasImage" :src="imageUrl" />
                <span class="px-2">{{ recalHeaderText }}</span>
            </span>
        </div>
        <div>
            <span v-for="copy in recalBody" :key="copy">
                <span v-if="doesCopyContainTextLink(copy)" class="recal-link">
                    <textLink
                        linkType="text"
                        :text="getRouterLinkDisplayTextFromCopy(copy)"
                        href="#!"
                        @click-event="$emit('textLinkClicked', getRouterLinkRouteFromCopy(copy))"
                        :data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)" />
                </span>
                <span v-else v-html="copy" class="alert-body"></span>
            </span>
        </div>
    </div>
</template>

<script>
import textLink from "@/ux-components/text-link/text-link";

// Supporting files
import {
    doesCopyContainTextLink,
    splitCopyOnCMSPlaceHolder,
    getRouterLinkRouteFromCopy,
    getRouterLinkDisplayTextFromCopy,
    getExternalLink,
} from "@/helpers/cms-content-helper";

function getInlineAltText(token) {
    const innerTokens = token.split(",");

    return innerTokens[1] ?? "";
}

export default {
    name: "recal-disclaimer",
    props: {
        cmsWidgetName: String,
    },
    data() {
        return {};
    },
    methods: {
        getInlineAltText,
        doesCopyContainTextLink,
        splitCopyOnCMSPlaceHolder,
        getRouterLinkRouteFromCopy,
        getRouterLinkDisplayTextFromCopy,
        getExternalLink,
    },
    computed: {
        imageUrl() {
            return this.getCmsContent(this.cmsWidgetName, "Image");
        },
        hasImage() {
            return !!this.imageUrl;
        },
        recalHeaderText() {
            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
        },
        recalBody() {
            return splitCopyOnCMSPlaceHolder(
                this.getCmsContent(this.cmsWidgetName, "SubheaderText")
            );
        },
    },
    components: {
        textLink,
    },
};
</script>

<style lang="scss" scoped>
.alert {
    text-align: center;
    &.recal-alert {
        padding: 16px 18px;
    }
    &.alert-info {
        background-color: #e5f1fa;
        color: #525656;
        .alert-heading {
            color: #0070d1;
            font-weight: 600;
            font-size: 14px;
            line-height: 17.3px;
        }
        svg {
            fill: #0070d1;
            width: 1rem;
            height: 1rem;
        }
    }
    & .alert-heading {
        font-size: 14px;
    }
    .alert-body {
        font-size: 14px;
        font-weight: 400px;
    }
    .recal-link {
        font-size: 14px;
        line-height: 24px;
        font-weight: 600;
    }
}
</style>
