<template>
    <input :class="containerClass"  :value="d_displayValue"  @input="onInput" @change="onChange"  @focus="onFocus"/>
</template>

<script>
export default {
    name: 'InputText',
    emits: ['update:modelValue','update-editing-cell-class'],

    props: {
        modelValue: null,

        align:{
            type:String,
            default:null
        },

        case:{
            type:String,
            default:""
        },

        autoSelection:{
            type:Boolean,
            default:true
        },

        tableCellEditor:{
            type:Boolean,
            default:false
        }
    },
    data(){
       return{
           d_displayValue: this.modelValue
       }
    },
    watch: {
        modelValue(newValue) {
          if(newValue!==this.d_displayValue){
              this.d_displayValue = this.formatValue( newValue);
          }
        },
    },
    created(){
       if(this.tableCellEditor){
            this.$emit("update-editing-cell-class","p-cell-editing-border");
       }
    },
  
    methods: {
        onInput(event) {
            //this.$emit('update:modelValue', event.target.value);
            this.d_displayValue  = this.formatValue( event.target.value || '');
        },

        onChange(event) {
            const value= this.formatValue( event.target.value || '');

            if(value!==this.d_displayValue){
                this.d_displayValue = value;
            }
            
            this.$emit('update:modelValue', value);
        },

        onFocus(){
            this.autoSelection && this.$el.select();
        },

        formatValue(value){

            if( value===null || value===undefined || value==='' )
                return '';

            let case2=this.case.trim().toUpperCase();
         
            if(case2 ==='UPPER'){
                value =value.toString().toUpperCase();
            }
            else if(case2 ==='LOWER'){
                value = value.toString().toLowerCase();
            }

            return value;
         },
    },

    computed:{

        containerClass() {
            const align= this.align || ''
            const alignClass= (align==='')? null : 'text-'+align;

            return [{'p-cell-editor': this.tableCellEditor }, 'p-inputtext','p-component', alignClass, ];
        },
        // displayValue(){
        //     return this.formatValue(this.modelValue)
        // }
    }
};
</script>
