<template>
    <div
        class="text-block w-100"
        :class="[justifyText, typeStyle, fontWeight, marginTopClass]"
        :style="{ 'font-weight': fontWeight }">
        <span v-for="copy in splitCopyOnCMSPlaceHolder(this.textBlockCopy)" :key="copy">
            <span v-if="doesCopyContainRouterLink(copy)">
                <textLink
                    linkType="text"
                    :text="getRouterLinkDisplayTextFromCopy(copy)"
                    href="javascript:void(0)"
                    useLoadingModal
                    @click-event="navigateWithScenario(getRouterLinkRouteFromCopy(copy))" />
            </span>
            <span v-else-if="doesCopyContainTextLink(copy)">
                <textLink
                    linkType="text"
                    :text="getRouterLinkDisplayTextFromCopy(copy)"
                    :href="getExternalLink(copy)"
                    @click-event="$emit('textLinkClicked', getRouterLinkRouteFromCopy(copy))"
                    :data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)" />
            </span>
            <span v-else v-html="copy"></span>
        </span>
    </div>
</template>

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

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

export default {
    name: "textBlock",
    props: {
        customText: String, // used to allow the insert of token values into textblock
        justifyText: String, // right, center (left is default)
        typeStyle: String, // h1-h6, body, small, label, caption (see Figma or Confluence documentation)
        fontWeight: String, // bold=500, default is 400
        cmsWidgetName: String,
        marginTopSizeOverride: Number, // override mt-2 with a bootstrap size from 0-5 or auto
    },
    methods: {
        doesCopyContainRouterLink,
        doesCopyContainTextLink,
        splitCopyOnCMSPlaceHolder,
        getRouterLinkRouteFromCopy,
        getRouterLinkDisplayTextFromCopy,
        getExternalLink,
        navigateWithScenario(scenarioName) {
            this.$router.navigateWithoutSaving(scenarioName, this.$route);
        },
    },
    computed: {
        pageQueryString() {
            return applicationConfig.PAGE_QUERYSTRING;
        },
        textBlockCopy() {
            if (this.customText) {
                return this.customText;
            }
            return this.getCmsContent(this.cmsWidgetName, "Text");
        },
        marginTopClass() {
            if (this.marginTopSizeOverride === "auto") {
                return "mt-auto";
            }
            if (this.marginTopSizeOverride >= 0 && this.marginTopSizeOverride <= 5) {
                return "mt-" + this.marginTopSizeOverride;
            }
            return "mt-2";
        },
    },
    components: {
        textLink,
    },
};
</script>

<style lang="scss" scoped>
.text-block {
    &.right {
        text-align: right;
    }
    &.center {
        text-align: center;
    }
    &.bold {
        font-weight: 500;
    }
    &.dark {
        color: $black;
    }
}
</style>
