<template>
    <div class="block-container">
        <div class="d-flex">
            <textBlock
                :cmsWidgetName="headerCmsWidgetName"
                :customText="customHeaderText"
                typeStyle="body dark"
                fontWeight="bold"
                :marginTopSizeOverride="0" />
        </div>
        <div class="review-block-body-container">
            <div
                v-for="item in content"
                :key="item"
                class="review-block-content"
                data-test="contentLine"
                v-html="item"></div>
            <div
                class="link-container"
                :class="{ 'expanded': linkVisible }">
                <textLink
                    linkType="text"
                    :text="editLinkText"
                    useLoadingModal
                    href="javascript:void(0)"
                    class="link"
                    @clickEvent="linkClicked">
                </textLink>
            </div>
        </div>
    </div>
</template>

<script>
import textBlock from '@/digital-components/text-block/text-block.vue';
import textLink from '@/ux-components/text-link/text-link.vue';

export default {
    name: 'review-block',
    components: {
        textBlock,
        textLink
    },
    props: {
        headerCmsWidgetName: String,
        customHeaderText: String,
        content: Array, // Specifically an array of strings.
        editLinkText: {
            type: String,
            default: 'Edit'
        },
        linkVisible: Boolean
    },
    emits: ['edit-clicked'],
    data() {
        return {};
    },
    computed: {
        screenReaderOnlyText() {
            return this.getCmsContent(this.editScreenReaderTextCmsWidgetName, 'Text');
        }
    },
    methods: {
        linkClicked() {
            this.$emit('edit-clicked');
        }
    }
};
</script>

<style lang="scss" scoped>
:deep(.review-block-content > ul) {
    margin-bottom: 0rem;
}
.review-block-body-container {
    margin-top: .625rem;
}
.link-container {
    max-height: 0;
    transition: $transition-swing;
    overflow: hidden;

    &.expanded {
        margin-top: .625rem;
        max-height: 2rem;
    }
}
</style>
