<template>
    <div class="textarea-question">
        <label for="textarea-comments" class="fw-bold mb-1">{{ labelText }} <span v-if="isRequired" class="fw-normal">(Optional)</span></label>
        <textarea
            id="textarea-comments"
            class="p-4"
            :maxlength=maxLength
            role="textbox"
            contenteditable="true"
            aria-multiline="true"
            aria-required="false"></textarea>
        <p tabindex="0" class="caption mt-2 mb-0" id="charactersremaining">
            {{maxLength}}/{{maxLength}} characters remaining
        </p>
    </div>
</template>

<script>
export default {
    name: "textareaquestion",
    props: {
        cmsWidgetName: String,
        isRequired: Boolean,
        maxLength: Number,
        modelValue: String,
        labelText: String,
    },
    mounted: function () {
        const my_textarea = document.getElementById("textarea-comments");
        const remaining = document.getElementById("charactersremaining");
        const remain = 250;

        my_textarea.addEventListener("input", () => {
            const total = remain - my_textarea.value.length;
            const color = total < remain * 0.1 ? "red" : null; //Change text to red when the total remaining goes below 25;
            remaining.innerHTML = `${total}/250 characters remaining`;
            remaining.style.color = color;
        });
    },
};
</script>

<style lang="scss">
.textarea-question {
    display: flex;
    flex-direction: column;
    label {
        span {
            color: $gray-500;
        }
    }
    textarea {
        border-radius: 0.5rem;
        border: 1px solid $gray-550;
        height: 88px;
        &:hover {
            box-shadow: 0 0 0 4px #9fcee6;
        }
        &:focus {
            box-shadow: 0 0 0 2.5px $blue;
            outline: none;
        }
    }
    p {
        color: $gray-500;
    }
}
</style>
