<template>
    <v-sheet tile>

        <template v-if="action != 'delete'">
            <v-row dense>

                <template v-if="action == 'insert'">
                    <cs-file-box 
                        ref="File"
                        v-if="activeRecord"
                        :control="controls.file"
                        :errors="errorsManager.ByField('file')"

                        v-model="activeRecord.files"
                        
                        @focus="errorsManager.ResetField('file')"
                        @blur="errorsManager.Validate('file')"
                    />
                </template>

                <template v-else>

                    <cs-edit-box 
                        ref="First"
                        :control="controls.name"
                        :errors="errorsManager.ByField('name')"

                        v-model="activeRecord.name"
                        
                        @focus="errorsManager.ResetField('name')"
                        @blur="errorsManager.Validate('name')"
                    />
                </template>

            </v-row>
        </template>

        <cs-info-alert 
            v-else
            color="red"
            icon="mdi-alert"
            :message="__('Sunteți sigur că doriți ștergerea fișierului :name?', {
                name: activeRecord.file_original_name
            })"
        />

        
    </v-sheet>
</template>

<script>
    export default {

        props: {
            controls: {default: () => ({})},
            activeRecord: {required: true},
            errorsManager: {required: true},
            action: {required: true},
            currentAction: {required: true},
        },

        watch: {
            'activeRecord.name': function(name) {
                this.activeRecord.file_original_name = name + '.' + this.activeRecord.file_original_extension;
            }   
        },

        methods: {
            Focus() {
                if(this.action == 'update')
                {
                    this.$refs.First.Focus();
                }
            }
        },

        mounted() {
            if(this.action == 'update')
            {
                setTimeout( () => {
                    this.Focus();
                }, 150);
            }    
        },

        components: {
            // CsTextBox: require('@CsVueComp/controls/texts/CsTextBox').default,
            CsFileBox: require('@CsVueComp/controls/files/CsFileBox').default,
            CsInfoAlert: require('@CsVueComp/sheets/CsInfoAlert').default,
            CsEditBox: require('@CsVueComp/controls/texts/CsEditBox').default,
        },

        name: 'FileInput',
    }
</script>