<template>
    <div class="textarea-question">
        <div class="label-wrapper d-flex flex-column mb-1" :aria-label="questionText">
            <!-- Wrap label and span because v-html prevents v-if from displaying if v-if <span> is inside <label>-->
            <div class="d-flex mb-1">
                <label :for="textAreaLabelCopy" class="fw-bold" v-html="questionText"></label>
                <span v-if="!isRequired" class="fw-normal ms-1">(Optional)</span>
            </div>
            <textarea
                :id="textAreaLabelCopy"
                ref="textarea"
                v-model="value"
                v-maska="mask"
                @keyup="updateCount"
                class="p-4"
                :maxlength="maxLength"
                role="textbox"
                aria-multiline="true"
                :aria-required="isRequired"></textarea>
            <p
                tabindex="-1"
                class="caption mt-2 mb-0 w-100"
                id="charactersRemaining"
                :class="[urgentCountdown ? 'urgent-countdown' : '']">
                {{ remainingCount }}/{{ maxLength }} characters remaining
            </p>
        </div>
    </div>
</template>

<script>
export default {
    name: "textareaQuestion",
    props: {
        cmsWidgetName: String,
        isRequired: Boolean,
        maxLength: {
            type: Number,
            default: 150,
        },
        modelValue: String,
        textAreaLabelCopy: {
            type: String,
            default: "text area",
        },
    },
    // TODO: At some point in the future we should probably add the tie in to validation here in case the field must be populated for some other use cases
    setup() {},
    computed: {
        questionText() {
            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
        },
        value: {
            get: function () {
                return this.modelValue;
            },
            set: function (newValue) {
                this.$emit("update:modelValue", newValue);
            },
        },
        remainingCount() {
            return this.maxLength - (this.value?.length ?? 0);
        },
        urgentCountdown() {
            return this.remainingCount <= this.maxLength * 0.1 ? true : false;
        },
        mask() {
            // Allow any character but only the max length number of times.
            return {
                mask: `x*${this.maxLength}`,
                tokens: {
                    x: {
                        pattern: /.|\n|\r/,
                    },
                },
            };
        },
    },
};
</script>

<style lang="scss" scoped>
.textarea-question {
    display: flex;
    flex-direction: column;
    label {
        color: $black;
    }
    .label-wrapper {
        display: flex;
        label {
            span {
                color: $gray-500;
            }
        }
    }
    textarea {
        border-radius: 0.5rem;
        border: 1px solid $gray-500;
        height: 88px;
        &:focus {
            box-shadow: 0 0 0 2.5px $blue;
            outline: none;
        }
        &:hover {
            box-shadow: 0 0 0 4px $blue-300;
        }
    }
    p {
        color: $gray-600;
        &.urgent-countdown {
            color: $red;
        }
    }
}
</style>
