<template>
    <div class="b-textarea" :class="{'autoHeight': autoHeight}" ref="bTextareaContainer">
        <div class="b-textarea-wrapper">
            <div class="b-textarea-placeholder"
                v-if="textareaValue.length == 0"
                :class="['b-textarea-placeholder', placeholderClass]"
                :style="placeholderStyle" 
                @click="clickOnPlaceholder"
            >{{placeholder}}</div>
            <textarea
                ref="bTextarea"
                v-model="textareaValue"
                :disabled="disabled"
                :maxlength="maxlength"
                :autofocus="focus ? 'autofocus' : ''"
                @keyup="changeEvent"
                @focus="focusEvent"
                @blur="blurEvent"
            ></textarea>
        </div>
    </div>
</template>
<script>
export default {
    name: 'BTextarea',
    props: {
        value: {
            type: String,
            default: '',
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        maxlength: {
            type: Number,
            default: 140,
        },
        focus: {
            type: Boolean,
            default: false,
        },
        autoHeight: {
            type: Boolean,
            default: false,
        },
        adjustPosition: {
            type: Boolean,
            default: true,
        },
        cursorSpacing: {
            type: Number,
            default: 0,
        },
        showConfirmBar: {
            type: Boolean,
            default: true,
        },
        cursor: {
            type: Number,
            default: -1,
        },
        selectionStart: {
            type: Number,
            default: -1,
        },
        selectionEnd: {
            type: Number,
            default: -1,
        },
        placeholder: {
            type: String,
            default: '',
        },
        placeholderStyle: {
            type: String,
            default: '',
        },
        placeholderClass: {
            type: String,
            default: 'textarea-placeholder',
        }
    },
    data () {
        return {
            textareaValue: this.value,
            rows: this.value.split('\n').length
        };
    },
    watch: {
        value() {
            this.textareaValue = this.value.length > this.maxlength ? this.value.slice(0, this.maxlength) : this.value;
            this.rows = this.textareaValue.split('\n').length;
        },
        rows(newValue, oldValue) {
            if (this.autoHeight) {
                this.$refs.bTextareaContainer.style.setProperty('height',`${24 * newValue}px`,'important');
            }
            this.$emit('linechange', {
                height: 24 * newValue,
                heightRpx: (750 / window.DEVICE_WIDTH) * 24 * newValue,
                lineCount: newValue
            });
        },
        autoHeight() {
            if (this.autoHeight) {
                this.$refs.bTextareaContainer.style.setProperty('height',`${24 * this.rows}px`,'important');
            } else {
                this.$refs.bTextareaContainer.style.removeProperty('height');
            }
        }
    },
    methods: {
        clickOnPlaceholder() {
            this.$refs.bTextarea.focus();
        },
        changeEvent($event) {
            this.rows = $event.target.value.split('\n').length;
            this.$emit('input', {
                detail: {
                    value: $event.target.value,
                    cursor: $event.srcElement.selectionStart
                }
            });
        },
        focusEvent($event) {
            const value = $event.target.value;
            let start = value.length,
                end = value.length;

            if (this.selectionStart !== -1 && this.selectionEnd !== -1) {
                start = this.selectionStart;
                end = this.selectionEnd;
            } else if (this.cursor !== -1) {
                start = end = this.cursor;
            }
            $event.srcElement.setSelectionRange(start, end);

            this.$emit('focus', {
                detail: {
                    value
                }
            });
        },
        blurEvent($event) {
            this.$emit('blur', {
                detail: {
                    value: $event.target.value,
                    cursor: $event.srcElement.selectionStart
                }
            });
        }
    }
}
</script>
<style>
.b-textarea {
    height: 300px;
}
.b-textarea.autoHeight {
    height: 24px!important;
}
.b-textarea-wrapper {
    position: relative;
    font-size: 16px;
    height: 100%;
    line-height: 24px;
}
.b-textarea-wrapper .b-textarea-placeholder {
    position: absolute;
    color: #808080;
}
.b-textarea-wrapper textarea {
    font-size: inherit;
    line-height: inherit;
    display: block;
    width: 100%;
    height: 100%;
}
</style>


<template>
    <div class="b-textarea" :class="{'autoHeight': autoHeight}" ref="bTextareaContainer">
        <div class="b-textarea-wrapper">
            <div class="b-textarea-placeholder"
                v-if="textareaValue.length == 0"
                :class="['b-textarea-placeholder', placeholderClass]"
                :style="placeholderStyle" 
                @click="clickOnPlaceholder"
            >{{placeholder}}</div>
            <textarea
                ref="bTextarea"
                v-model="textareaValue"
                :disabled="disabled"
                :maxlength="maxlength"
                :autofocus="focus ? 'autofocus' : ''"
                @keyup="changeEvent"
                @focus="focusEvent"
                @blur="blurEvent"
            ></textarea>
        </div>
    </div>
</template>
<script>
export default {
    name: 'BTextarea',
    props: {
        value: {
            type: String,
            default: '',
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        maxlength: {
            type: Number,
            default: 140,
        },
        focus: {
            type: Boolean,
            default: false,
        },
        autoHeight: {
            type: Boolean,
            default: false,
        },
        adjustPosition: {
            type: Boolean,
            default: true,
        },
        cursorSpacing: {
            type: Number,
            default: 0,
        },
        showConfirmBar: {
            type: Boolean,
            default: true,
        },
        cursor: {
            type: Number,
            default: -1,
        },
        selectionStart: {
            type: Number,
            default: -1,
        },
        selectionEnd: {
            type: Number,
            default: -1,
        },
        placeholder: {
            type: String,
            default: '',
        },
        placeholderStyle: {
            type: String,
            default: '',
        },
        placeholderClass: {
            type: String,
            default: 'textarea-placeholder',
        }
    },
    data () {
        return {
            textareaValue: this.value,
            rows: this.value.split('\n').length
        };
    },
    watch: {
        value() {
            this.textareaValue = this.value.length > this.maxlength ? this.value.slice(0, this.maxlength) : this.value;
            this.rows = this.textareaValue.split('\n').length;
        },
        rows(newValue, oldValue) {
            if (this.autoHeight) {
                this.$refs.bTextareaContainer.style.setProperty('height',`${24 * newValue}px`,'important');
            }
            this.$emit('linechange', {
                height: 24 * newValue,
                heightRpx: (750 / window.DEVICE_WIDTH) * 24 * newValue,
                lineCount: newValue
            });
        },
        autoHeight() {
            if (this.autoHeight) {
                this.$refs.bTextareaContainer.style.setProperty('height',`${24 * this.rows}px`,'important');
            } else {
                this.$refs.bTextareaContainer.style.removeProperty('height');
            }
        }
    },
    methods: {
        clickOnPlaceholder() {
            this.$refs.bTextarea.focus();
        },
        changeEvent($event) {
            this.rows = $event.target.value.split('\n').length;
            this.$emit('input', {
                detail: {
                    value: $event.target.value,
                    cursor: $event.srcElement.selectionStart
                }
            });
        },
        focusEvent($event) {
            const value = $event.target.value;
            let start = value.length,
                end = value.length;

            if (this.selectionStart !== -1 && this.selectionEnd !== -1) {
                start = this.selectionStart;
                end = this.selectionEnd;
            } else if (this.cursor !== -1) {
                start = end = this.cursor;
            }
            $event.srcElement.setSelectionRange(start, end);

            this.$emit('focus', {
                detail: {
                    value
                }
            });
        },
        blurEvent($event) {
            this.$emit('blur', {
                detail: {
                    value: $event.target.value,
                    cursor: $event.srcElement.selectionStart
                }
            });
        }
    }
}
</script>
<style>
.b-textarea {
    height: 300px;
}
.b-textarea.autoHeight {
    height: 24px!important;
}
.b-textarea-wrapper {
    position: relative;
    font-size: 16px;
    height: 100%;
    line-height: 24px;
}
.b-textarea-wrapper .b-textarea-placeholder {
    position: absolute;
    color: #808080;
}
.b-textarea-wrapper textarea {
    font-size: inherit;
    line-height: inherit;
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
}
</style>


