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

<script>
export default {
    name: "textareaQuestion",
    props: {
        cmsWidgetName: String,
        isRequired: Boolean,
        maxLength: {
            type: Number,
            default: 250,
        },
        modelValue: String,
    },
    setup(props) {
        const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;

        const propsClone = Object.assign({}, props);
        const modelValue = propsClone.modelValue;
        let initialValue;

        switch (typeof modelValue) {
            case "number":
                initialValue = modelValue;
                break;
            default:
                initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
                break;
        }

        const fieldOptions = {
            type: "text",
            value: modelValue,
            initialValue: initialValue,
        };
    },
    computed: {
        TextAreaContentWidget() {
            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;
        },
        urgentCountdown() {
            return this.remainingCount <= this.maxLength * 0.1 ? true : false;
        },
    },
    methods: {
        updateCount() {
            if (this.value.length > this.maxLength) {
                this.value = this.value.slice(0, this.maxLength);
            }
        },
    },
};
</script>

<style lang="scss">
.textarea-question {
    display: flex;
    flex-direction: column;
    label {
        color: $black;
    }
    .label-wrapper {
        display: flex;
        align-items: center;
        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-500;
        &.urgent-countdown {
            color: $red;
        }
    }
}
</style>
