<template>
    <RowForm :label='labelSample'>
        <InputForm  @update:isEditing="isEditing = $event" tabindex="0" :name="'example_' + name" :id="'example_' + id" :attribute="'example_' + attribute" :value='example' :placeholder='placeholderSample' :group='group' @update:value="updateexample" @blur="validateExpression"></InputForm>
    </RowForm>
     <RowForm :label='label'>
        <InputForm  @update:isEditing="isEditing = $event" tabindex="0" :name="'regexp_' + name" :id="'regexp_' + id" :attribute="'regexp_' + attribute" :value='value' :placeholder='placeholder' :group='group' @update:value="updatevalue" @blur="validateExpression"></InputForm>
    </RowForm>
    <tr v-if="showResponseValidate">
        <td style="width: 20px;"><i :class="ico" :id="'ico_' + id" :name="'ico_' + id" :style="'color:'+ color "></i></td>
        <td colspan="5" class="align-middle"><strong>{{responseValidate}}</strong></td>
    </tr>
</template>
<script lang="ts">
import InputForm from  '../InputForm.vue';
import RowForm from '../RowForm.vue';
import { DirectoryFilesService } from '@/domain/services/DirectoryFiles.service';
import { Attribute } from '@/domain/models/Attribute.interface'
export default{
    name:'InputRegularExpresion',
    components: {
        InputForm,
        RowForm,
    },
    props: {
        id: { type: String, default: '' },
        name: { type: String, default: '' },
        attribute: { type: String, default: '' },
        label: { type: String, default: 'Regular Expression' },
        labelSample: { type: String, default: 'Sample File Name' },
        value: { type: String, default: '' },
        example: { type: String, default: '' },
        placeholder : { type: String, default: 'enter regular expression' },
        placeholderSample : { type: String, default: 'enter sample file name' },
        group: { type: String, default: '' },
        taskName: { type: String, default: '' },
        taskDescription: { type: String, default: '' },
    },
    data: () =>{
        return {
            directoryFilesService : {} as DirectoryFilesService,
            attributes : [],
            responseValidate: '',
            showResponseValidate : false,
            ico: 'fa fa-check-circle-o',
            color: '#946464;',
            isEditing: false,
        }
    },
    watch:{
        isEditing: function(){
            this.$emit('update:isEditing', this.isEditing);
        }
    },
    methods: {
        updatevalue(value: any){
            this.$emit('update:value', value);
        },
        updateexample(value: any){
            this.$emit('update:sample', value);
        },
        async validateExpression(){
            this.attributes = [];
            this.addAttribute('task_name', this.taskName);
            this.addAttribute('task_description', this.taskDescription);
            this.addAttribute('data', this.example);
            this.addAttribute('value', this.value);
            let json_request : {[k: string]: any} = {};
            json_request.attributes = this.attributes;
            const missingInputs : String[] = this.validateInputsRegularExpression( json_request.attributes )
            if ( missingInputs.length > 0 ) {
              this.showResponseValidate =  true;
              this.ico = 'fa fa-times-circle';
              this.color = '#946464;';
              this.responseValidate = `Missing the input [${ missingInputs.join() }]`;
              return
            }
            let response = await this.directoryFilesService.validateRegularExpression(JSON.stringify(json_request));
            this.showResponseValidate =  true;
            this.ico = 'fa fa-times-circle';
            this.color = '#946464;';
            if(response.status == 200){
                if(response.result[0] == true)
                {
                    this.responseValidate = 'Match ' + this.example;
                    this.ico = 'fa fa-check-circle-o';
                    this.color = '#64946c;';
                }
                else this.responseValidate = 'No Match Found'
            }else{
                this.responseValidate = response.responseText;
            }
        },
        addAttribute(attributeName: string, value: string){
            let attribute = {}  as Attribute;
            attribute.attribute = attributeName;
            attribute.value = value;
            this.attributes.push(attribute);
        },
        /** Validate that the value of the inputs of regular expression are not empty,
        If some is empty, just not make the request and show that inputs in screen */
        validateInputsRegularExpression( attributes : { attribute : String, value : String}[] ): String[] {
          return attributes.map( element => {
            if (element.value == "") {
              switch (element.attribute) {
                case "data": return "Sample File Name"; break
                case "value": return "Regular Expression"; break
              /* Clean the array of elements that are not desired */
                default: return ""; break
              }
            }
            /* Clear elements that are not expected in this verification */
            return ""
          }).filter( element => element != "" )
        }
    },
    mounted(){
        this.directoryFilesService = new DirectoryFilesService();
    }
}

</script>