<template>
    <div class="card limitTextCard">
        <div class="card-body p-1 counting">
            <template v-for="(type, index) in requiredData.characters">
                <p class="text-info"><strong>* One {{index}} message is of {{ type.count }} characters long and length must be under {{ type.limit }}</strong></p>
            </template>
            <p class="text-success"><strong>* Character Count : </strong>{{ characterCount }}</p>
            <p class="text-warning"><strong>* SMS Parts : </strong>{{ smsParts }}</p>
            <p class="text-warning"><strong>* Available limit  : </strong>{{ availableLimit }}</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "characterLimitCount",
        props: {
            characterMax: {
                type: [Number],
                default: 0,
            },
            PerPartCharacter: {
                type: [Number],
                default: 0,
            },
            LimitTotal: {
                type: [Number],
                default: 0,
            },
            smsBody: {
                type: [String],
                default: '',
            },
        },
        watch : {
            'smsBody' : function () {
                if (this.smsBody !== '') {
                    if (this.smsBody.length > this.LimitTotal){
                        this.$set(this.formObject,'body', '');
                    }
                }
            }
        },
        computed: {
            characterCount() {
                if (this.smsBody !== '') {
                    return this.smsBody.length;
                }
                return 0;
            },
            smsParts() {
                if (this.smsBody !== '') {
                    let byteLength = new TextEncoder().encode(this.smsBody).length;
                    return Math.ceil(byteLength / this.characterMax);
                }
                return 0;
            },
            availableLimit() {
                if (this.smsBody !== ''){
                    return this.LimitTotal - this.smsBody.length;
                }
                return this.LimitTotal;
            },
        },
    }
</script>

<style scoped>
.limitTextCard{
    margin-bottom: 0 !important;
}
</style>
