<template>
    <tr>
        <td style="width: 20px;"><i class="fa fa-times-circle validation-icon" v-if='invalid' :id="'ico_' + id" :name="'ico_' + id" ></i></td>
        <td style="width: 150px;"><span class="text-dark" style="font-size: 14px;"><strong>{{label}}</strong><br></span></td>
        <td colspan="2">
            <input type="text" @click="showFileBrowser" :value="sourcePath" :id="id" class="form-control-sm form-control input-file" :placeholder="placeholder" readonly="" :group="group" :label="label" :name="name" :attribute="attribute">
            <FileBrowser :title="title" :typeSelect="type" :modalActive="showFileBrowserModal" @cancel="cancelFileBrowser" @selectFileBrowser="selectFileBrowser" :readonly='readonly' :resetFilePath="resetFilePath"></FileBrowser>
        </td>
        <td style="width: 20px;"></td>
    </tr>
    <InputRegularExpresion :taskName="taskName" :taskDescription="taskDescription" v-if="typeSelect == 'pattern'" :value='regex' :example='sampleFile' @update:value='updateRegex' @update:sample='updateSample'></InputRegularExpresion>

</template>

<script lang="ts">
import FileBrowser from  '@/lib-components/component/InputFileBrowser/FileBrowser.vue';
import InputRegularExpresion from  '@/lib-components/component/InputFileBrowser/InputRegularExpresion.vue';
export default {
    name: 'InputFile',
    components:{
        FileBrowser,
        InputRegularExpresion
    },
    props: {
        id: { type: String, default: '' },
        name: { type: String, default: '' },
        attribute: { type: String, default: '' },
        label: { type: String, default: '' },
        checked: { type: String, default: '' },
        group: { type: String, default: '' },
        title: { type: String, default: '' },
        placeholder: { type: String, default: 'click here to select file' },
        value: { type: String, default: '' },
        readonly: { type:Boolean, default: true },
        typeSelect: { type: String, default: 'file' },
        regex: { type: String, default: '' },
        sampleFile: { type: String, default: '' },
        taskName: { type: String, default: '' },
        taskDescription: { type: String, default: '' },
        invalid: { type: Boolean, default: false },
        resetFilePath: { type: Boolean, required: false, default: false}
    },
    methods:{
        updateSample(value: string){
            this.$emit('update:sample', value);
        },
        updateRegex(value: string){
            this.$emit('update:regex', value);
        },
        showFileBrowser(){
            this.showFileBrowserModal = true;
        },cancelFileBrowser(){
            this.showFileBrowserModal =  false;
        },
        selectFileBrowser(data : string){
            this.sourcePath = data;
            this.showFileBrowserModal =  false;
            this.$emit('selectedFileChange',  data);
        },
    },
    data:()=>{
        return {
            showFileBrowserModal: false,
            sourcePath: '',
            resetFilePathControl : false
        }
    },
    watch:{
        value: function(value){
            this.sourcePath =  value;
            this.isEditing = true;
            this.$emit('update:isEditing', this.isEditing);
        },
        resetFilePath: function( value : boolean) {
          this.resetFilePathControl = value
        }
    },
    computed:{
        type(){
            return (this.typeSelect != 'pattern')?this.typeSelect: 'folder';
        }
    },
    mounted(){
        this.currentCheckStatus = this.checked
    }

}
</script>
<style scoped>
.input-file{
    background: var(--input-background-color) !important;
    border-radius: 0px;
    border-style: none;
    border-bottom-style: dashed;
}
.validation-icon{
    color: #946464;
}

.label{
    font-size: var(--input-label-font-size) !important;
    color: var(--label-form-color) !important;
    font-weight: bold;
}
</style>