<template>
    <div class="bmiCategoryCard" v-if="bmi > 0">
        <div class="bmiCategoryCard__title">
            Your BMI suggests that you are
            <span class="bmiCategoryCard__category" v-html="bmiCategoryName"></span>
        </div>

        <div v-if="bmiCategoryContent" class="bmiCategoryCard__content" v-html="bmiCategoryContent"></div>

        <div class="bmiCategoryCard__actions" v-if="assessmentLink?.text?.length && assessmentLink?.url?.length">
            <a :href="assessmentLink.url" class="button buttonAlt" v-html="assessmentLink.text"></a>
        </div>
    </div>
</template>

<script>
export default {
    name: 'bmiCategoryCard',

    props: {
        bmi: {
            type: [Number, String],
            default: 0,
        },

        bmiCategories: {
            type: [Array, Object],
            default: [],
        },

        assessmentLink: {
            type: [Array, Object, Boolean, String],
            default() {
                return {
                    text: '',
                    url: '',
                }
            },
        },
    },

    data() {
        return {
            categorySection: 1,
        }
    },

    computed: {
        bmiValue() {
            return Number(this.bmi, 0)
        },

        activeCategory() {
            const bmi = this.bmiValue

            let category = this.bmiCategories.find((cat) => {
                if (bmi >= cat.min && bmi < cat.max) {
                    this.categorySection = cat.section
                    return cat
                }

                return false
            })

            let categorySet = category ?? false

            if (!categorySet) {
                if (bmi >= 30) {
                    this.categorySection = 4
                } else {
                    this.categorySection = 1
                }

                categorySet = this.bmiCategories.find((cat) => {
                    if (cat.section === this.categorySection) {
                        return cat
                    }

                    return false
                })
            }

            return categorySet
        },

        bmiCategoryName() {
            return this.activeCategory?.name?.length ? this.activeCategory.name : ''
        },

        bmiCategoryContent() {
            return this.activeCategory?.content?.length ? this.activeCategory.content : ''
        },
    },

    methods: {},
}
</script>

<style lang="less">
.bmiCategoryCard {
    text-align: left;
    width: 100%;

    &__title {
        .rems(14);
        line-height: 1.5;
        font-weight: 500;
    }

    &__category {
        .rems(14);
        line-height: 1.5;
        font-weight: 700;
    }

    &__content {
        padding: 20px 0 0;

        * {
            .rems(14);
            font-weight: 300;
            line-height: 1.2em;
        }
    }

    &__actions {
        padding: 24px 0 0;

        .button {
            width: 100%;
            margin: 0;
        }
    }
}
</style>
