<template>
    <div>
        <div
            class="subheader-primary d-flex align-items-center justify-content-center container-fluid overflow-hidden">
            <h5 class="text-center fw-normal mb-0 subheader-primary" :class="headerColor">
                <span>
                    {{ content }}
                </span>
                <buttonBack
                    v-if="hasBackButton"
                    :backButtonAccessibleText="backButtonAccessibleText"
                    @click-event="clickEvent" />
            </h5>
        </div>
        <div
            class="subheader-secondary d-flex align-items-center container-fluid overflow-hidden"
            :class="justifySubheader">
            <p class="fw-normal mb-0" :class="alternateFormatting">
                <span v-html="subText"> </span>
            </p>
        </div>
    </div>
</template>

<script>
import buttonBack from '@/iss-components/site-sub-header/button-back/button-back';
import {
    doesCopyContainRouterLink,
    splitCopyOnCMSPlaceHolder,
    getRouterLinkRouteFromCopy,
    getRouterLinkDisplayTextFromCopy,
    getRouterLinkHtmlStringFromCopy
} from '@/helpers/cms-content-helper';

import stripRteStyle from '@/helpers/text-helper';

export default {
    name: 'site-sub-header',
    components: { buttonBack },
    props: {
        cmsWidgetName: String,
        contentProperty: String,
        darkGraySubText: Boolean,
        hasBackButton: Boolean,
        issContainingPage: String,
        justification: String,
        stripRteStyle: Boolean,
        subContentProperty: String
    },
    emits: ['click-event'],
    computed: {
        content() {
            return this.getCmsContent(this.cmsWidgetName, this.contentProperty ?? 'SubHeaderText');
        },
        subText() {
            let subTextFromCms = this.getCmsContent(
                this.cmsWidgetName,
                this.subContentProperty ?? 'SecondaryText'
            );

            if (this.stripRteStyle) {
                subTextFromCms = stripRteStyle(subTextFromCms);
            }

            let subText = '';
            if (this.doesCopyContainRouterLink(subTextFromCms)) {
                splitCopyOnCMSPlaceHolder(subTextFromCms).forEach((sc) => {
                    if (this.doesCopyContainRouterLink(sc)) {
                        subText = subText + getRouterLinkHtmlStringFromCopy(sc);
                    } else {
                        subText = subText + sc;
                    }
                });
            } else {
                subText = subTextFromCms;
            }

            return subText ?? '';
        },
        backButtonAccessibleText() {
            return this.getCmsContent(this.cmsWidgetName, 'BackButtonAccessibleText');
        },
        headerColor() {
            return this.subText ? 'dark-header' : 'light-header';
        },
        justifySubheader() {
            return this.justification?.toLowerCase() === 'left'
                ? 'justify-content-left'
                : 'justify-content-center';
        },
        alternateFormatting() {
            // override for service-packages unique style
            if (this.issContainingPage?.toLowerCase() === 'service-packages') {
                return 'service-packages-subtext mt-4 mb-2 px-5';
            }
            return this.darkGraySubText ? 'dark-gray' : 'light-gray';
        }
    },
    methods: {
        doesCopyContainRouterLink,
        splitCopyOnCMSPlaceHolder,
        getRouterLinkRouteFromCopy,
        getRouterLinkDisplayTextFromCopy,
        getRouterLinkHtmlStringFromCopy,
        clickEvent() {
            this.$emit('click-event');
        }
    }
};
</script>

<style lang="scss" scoped>
.dark-header {
    color: $black;
}

.light-header {
    color: $gray-550;
}

h5 {
    line-height: 32px;

    button {
        color: inherit;
    }
    span {
        color: $black;
    }
}
p.light-gray {
    color: $gray-550;
}

p.dark-gray {
    color: $darker-gray;
}

p.service-packages-subtext {
    font-weight: 500 !important;
    line-height: 24px;
}

.subheader-secondary {
    &.justify-content-center {
        p {
            text-align: center;
        }
    }

    &.justify-content-left {
        p {
            text-align: left;
        }
    }
}
</style>
