<template>
    <v-sheet 
        tile
        :height="action != 'delete' ? 0.65 * app.height : null"
        class="overflow-y-auto"
    >
        <div class="px-2 pt-2">
            <template v-if="action != 'delete'">
                <v-row dense>
                    <v-col cols="4">
                        <cs-text-box 
                            ref="First"
                            :control="controls.name"
                            :errors="errorsManager.ByField('name')"
                            v-model="activeRecord.name"
                            @focus="errorsManager.ResetField('name')"
                            @blur="errorsManager.Validate('name')"
                        />
                    </v-col>

                    <v-col cols="4">
                        <categorie-autocomplete-selector
                            :app="app"
                            :categoriiForm="app.forms.Categorii"
                            :errors="errorsManager.ByField('category_id')"
                            @focus="errorsManager.ResetField('category_id')"
                            categoriiType="cursuri"
                            v-model="activeRecord.category_id"
                        />
                    </v-col>

                    <v-col cols="4">
                        <curstype-autocomplete-selector
                            :app="app"
                            :adresareForm="app.forms.Curstype"
                            v-model="activeRecord.type"
                            :errors="errorsManager.ByField('type')"
                            @focus="errorsManager.ResetField('type')"
                        />
                    </v-col>
                </v-row>

                <v-row dense>
                    <v-col cols="12">
                        <cs-text-box 
                            v-if="
                                (activeRecord.type == 'link') || 
                                (activeRecord.type == 'youtube')
                            "
                            :control="controls.url"
                            :errors="errorsManager.ByField('url')"
                            v-model="activeRecord.url"
                            @focus="errorsManager.ResetField('url')"
                            @blur="errorsManager.Validate('url')"
                        />

                        <template v-else-if="activeRecord.type == 'fisier'">
                            <v-sheet 
                                v-if="(action == 'update') && !!formprovider.oldRecord.file"
                                class="mb-3"
                            >
                                {{ __('Fișier actual: ') }} 
                                <strong>
                                    {{formprovider.oldRecord.file.file_original_name}}
                                </strong>                          
                            </v-sheet>

                            <cs-file-box 
                                :control="controls.file"
                                :errors="errorsManager.ByField('file')"
                                v-model="activeRecord.file"
                                @focus="errorsManager.ResetField('file')"
                                @blur="errorsManager.Validate('file')"
                            />
                        </template>
                    </v-col>
                </v-row>

                <v-row dense>
                    <v-col cols="8">
                        <v-row dense>
                            <v-col cols="6">
                                <v-select
                                    dense
                                    outlined
                                    :label="__('Tipul cursului')"
                                    :items="[
                                        {
                                            value: 'onsite',
                                            text: 'Onsite',
                                        },
                                        {
                                            value: 'online',
                                            text: 'Online',
                                        }
                                    ]"
                                    v-model="activeRecord.tip"
                                >
                                </v-select>
                            </v-col>

                            <v-col cols="6">
                                <adresare-autocomplete-selector
                                    :app="app"
                                    :errors="errorsManager.ByField('adresare_id')"
                                    :adresareForm="app.forms.Adresare"
                                    @focus="errorsManager.ResetField('adresare_id')"
                                    v-model="activeRecord.adresare_id"
                                />
                            </v-col>

                            <v-col cols="12">
                                <cs-date-interval-box 
                                    ref="Daterange"
                                    :control="controls.intervalvalabilitate"
                                    :errors="intervalDatesErrors"
                                    :value="controls.intervalvalabilitate.GetRange(activeRecord.date_from, activeRecord.date_to)"
                                    @input="controls.intervalvalabilitate.SetRangeValue($event, activeRecord, 'date_from', 'date_to')"
                                    @focus="errorsManager.ResetField('date_from'), errorsManager.ResetField('date_to')"
                                    @blur="errorsManager.Validate('date_from'), errorsManager.Validate('date_to')"
                                />
                            </v-col>

                            <v-col cols="12">
                                <cs-edit-box 
                                    :control="controls.descriere"
                                    :errors="errorsManager.ByField('descriere')"
                                    v-model="activeRecord.descriere"
                                    @focus="errorsManager.ResetField('descriere')"
                                    @blur="errorsManager.Validate('descriere')"
                                />
                            </v-col>
                        </v-row>
                    </v-col>

                    <v-col cols="4">
                        <cs-file-uploader 
                            ref="Avatar"
                            :control="controls.preview_image"
                            :immediateInput="false"
                            v-model="activeRecord.preview_image"
                            @uploaded="OnFileUploaded"
                            @issaved="OnFileIsSaved"
                        />
                    </v-col>

                    <v-col cols="4">
                        <v-radio-group 
                            v-model="activeRecord.public_private"
                            hide-details
                            dense
                            row
                        >
                            <v-radio
                                v-for="(status, index) in statuses"
                                :key="'status-' + index"
                                :value="status.value"
                                :label="status.text"
                            >
                            </v-radio>
                        
                        </v-radio-group>
                    </v-col>

                </v-row>

                <v-row dense>
                    <v-col cols="12">
                        <curs-tematica-control 
                            v-model="activeRecord.tematica"
                            @new-tematica="OnNewTematica"
                        />
                    </v-col> 

                </v-row>
            </template>

            <template v-else>
                <cs-info-alert 
                
                    color="red"
                    icon="mdi-alert"
                    :message="__('Sunteți sigur că doriți ștergerea cursului :name? Scrieți în căsuța următoare textul [confirm].', {
                        name: activeRecord.name
                    })"
                />

                <v-sheet class="mt-4">
                    <v-text-field
                        dense
                        hide-details
                        outlined
                        :label="__('Scrieți textul aici')"
                        v-model="formprovider.deleteConfirmText"
                    >
                    </v-text-field>
                </v-sheet>
            </template>
        </div>
    </v-sheet>
</template>

<script>
    export default {

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

        computed: {
            statuses() {
                return [
                    {
                        text: 'Public',
                        value: 'public',
                    },

                    {
                        text: 'Privat',
                        value: 'privat',
                    }
                ];
            },

            intervalDatesErrors() {
                if(!! this.errorsManager.ByField('date_from') )
                {
                    return this.errorsManager.ByField('date_from');
                }
                if(!! this.errorsManager.ByField('date_to') )
                {
                    return this.errorsManager.ByField('date_to');
                }
                return null;
            },

            formprovider() {
                return this.app.formproviders.Cursuri;
            }
        },

        methods: {
            Focus() {
                this.$refs.First.Focus();
            },

            OnFileIsSaved(saved) {
                this.$emit('file-saved', saved);
            },

            OnFileUploaded(file) {
                this.$emit('file-uploaded', file);
            },

            OnNewTematica(value) {
                console.log('new tematica');
            }
        },

        mounted() {
            if(this.action != 'delete')
            {
                setTimeout( () => {
                    this.Focus();
                }, 15);
            }    
        },

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

        name: 'CursInput',
    }
</script>