<template>
    <div>
        <div>
            <strong>
                {{ headerText }}
            </strong>
        </div>
        <div v-if="!this.isRepair">
            <ol>
                <li v-for="block in InstructionBlocks" :key="block">
                    <span v-for="token in block" :key="token">
                        <span v-if="doesCopyContainTextLink(token)" class="link">
                            <textLink
                                linkType="text"
                                :text="getRouterLinkDisplayTextFromCopy(token)"
                                href="#!"
                                @click-event="
                                    $emit('textLinkClicked', getRouterLinkRouteFromCopy(token))
                                "
                                :data-bs-target="'#' + getRouterLinkRouteFromCopy(token)" />
                        </span>
                        <span v-else v-html="token" class="copy"></span>
                    </span>
                </li>
            </ol>
        </div>
        <div v-else v-html="RepairInstructionText"></div>
    </div>
</template>

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

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

export default {
    name: "customer-instructions",
    data() {
        return {};
    },
    props: {
        cmsWidgetName: String,
        isRepair: Boolean,
    },
    methods: {
        doesCopyContainTextLink,
        splitCopyOnCMSPlaceHolder,
        getRouterLinkRouteFromCopy,
        getRouterLinkDisplayTextFromCopy,
        getExternalLink,
    },
    computed: {
        headerText() {
            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
        },
        InstructionBlocks() {
            const answers = this.getCmsContent(this.cmsWidgetName, "Answers");

            if (!answers) {
                return [];
            }

            const instructionBlocksRaw = answers.map((ans) => ans.Text);

            const instructionBlocksAsTokens = instructionBlocksRaw.map((raw) =>
                splitCopyOnCMSPlaceHolder(raw)
            );

            return instructionBlocksAsTokens;
        },
        RepairInstructionText() {
            return this.getCmsContent(this.cmsWidgetName, "Text");
        },
    },
    components: {
        textLink,
    },
};
</script>

<style lang="scss" scoped>
:deep(li) {
    margin-top: 0.5em;
}
</style>
