<template>
    <div class="container-fluid">
        <div class="row">

            <!-- *** LEFT SECTION *** -->
            <div class="col-8">
                <div class="panel panel-default">
                    <div class="panel-heading"></div>

                    <!-- IMAGE LISTING -->
                    <div class="panel-body" data-scroll-y="300">
                        <ml-search-tab-datatable
                                    ref="datatable"
                                    v-bind:trans="trans.table"
                                    v-bind:ajax-url="table.datatableAjaxUrl"
                                    v-bind:search-fields="search_fields"
                                    v-bind:processing="false"
                                    v-bind:thumb-sizes-data="datatableThumbSizes"
                                    v-bind:initial-thumb-id="datatableInitialThumbId"
                                    v-bind:initial-thumb-name="datatableInitialThumbName"
                                    v-bind:thumb-size-id-storage-key="thumbSizeIdStorageKey"
                                    v-bind:thumb-size-name-storage-key="thumbSizeNameStorageKey"
                                    v-on:update="onUpdateDatatable"
                                    v-on:show="onShowImageDatatable"
                                    v-on:edit="onEditImageDatatable"
                                    v-on:deleted="onDeletedImageDatatable"
                                    v-on:thumb-size-changed="onThumbSizeChange"
                            >  
                        </ml-search-tab-datatable>
                    </div>

                </div>
            </div>

            <!-- *** RIGHT SECTION *** -->
            <div class="col-4 inputs-wrapper">
                <div class="card">
                    <div class="card-heading d-flex justify-content-between">
                        <div class="card-heading-title">
                            <h3 class="card-title">{{ trans.filtersTitle }}</h3>
                            <p class="card-sub-title text-muted">{{ trans.filtersSubtitle }}</p>
                        </div>
                        <div class="card-heading-actions">
                        </div>
                    </div>
                    <div class="card-body">
                        <form class="form-horizontal" method="post" action="" 
                              enctype="multipart/form-data" autocomplete="off">

                            <!-- CATEGORY -->
                            <div class="form-group row align-items-center">
                                <label class="col-sm-4 control-label">{{ trans.filterCategory }}</label>
                                <div class="col-sm-8">
                                    <newscms-select2 
                                        id="ml_st_category"
                                        name="category" 
                                        v-bind:placeholder="trans.filterCategoryPlaceholder" 
                                        v-model="state.category_id"
                                        v-bind:data="extended_categories_list"
                                        dropdownparentid="media_library_modal"
                                        >
                                    </newscms-select2>
                                </div>
                            </div>

                            <!-- TAGS -->
                            <div class="form-group row align-items-center">
                                <label class="col-sm-4 control-label">{{ trans.filterTags }}</label>
                                <div class="col-sm-8">
                                    <newscms-tags-select 
                                        id="ml_st_tags"
                                        name="tags[]"
                                        v-bind:enableCreate="false"
                                        v-bind:sourceUrl="tags.source_url"
                                        v-bind:storeUrl="tags.store_url"
                                        v-bind:valueUrl="tags.value_url"
                                        v-model="tags.value"
                                        >
                                    </newscms-tags-select>
                                </div>
                            </div>

                            <!-- FILE NAME -->
                            <div class="form-group row align-items-center">
                                <label class="col-sm-4 control-label">{{ trans.filterFilename }}</label>
                                <div class="col-sm-8">
                                    <input 
                                        type="text" 
                                        class="form-control" 
                                        name="filename" 
                                        v-bind:placeholder="trans.filterFilenamePlaceholder" 
                                        v-model="state.filename"
                                    >
                                </div>
                            </div>

                            <!-- SOURCE -->
                            <div class="form-group row align-items-center">
                                <label class="col-sm-4 control-label">{{ trans.filterSource }}</label>
                                <div class="col-sm-8 ui-widget">
                                    <newscms-autocomplete 
                                        id="search_source"
                                        name="source"
                                        v-bind:sourceUrl="sourceAjaxUrl"
                                        v-bind:value="state.source"
                                        v-model="state.source"
                                        v-bind:placeholder="trans.filterSourcePlaceholder"
                                        appendTo="media_library_modal"
                                    >
                                    </newscms-autocomplete>
                                </div>
                            </div>

                            <!-- LICENCE -->
                            <div class="form-group row align-items-center">
                                <label class="col-sm-4 control-label">{{ trans.filterLicence }}</label>
                                <div class="col-sm-8">
                                    <newscms-select2 
                                        id="ml_st_licence"
                                        name="licence" 
                                        v-bind:placeholder="trans.filterLicencePlaceholder" 
                                        v-model="state.licence_id"
                                        v-bind:data="extended_licences_list"
                                        dropdownparentid="media_library_modal"
                                        >
                                    </newscms-select2>
                                </div>
                            </div>

                            <!-- DATE RANGE-->
                            <div class="form-group row align-items-center">
                                <label class="col-sm-4 control-label">{{ trans.filterCreatedAt }}</label>
                                <div class="col-sm-8">
                                    <newscms-daterangepicker 
                                        ref="daterangepicker"
                                        id="daterange_el" 
                                        name="daterange" 
                                        v-on:daterangechanged="onDateRangeChanged"
                                        opens ="left"
                                        drops="auto"
                                        v-bind:ranges="view.dateranges"
                                        v-bind:start_date="state.start_date"
                                        v-bind:end_date="state.end_date"
                                        >
                                    </newscms-daterangepicker>
                                </div>
                            </div>

                            <div class="form-group row pt-4">
                                <div class="col-sm-6">
                                    <button type="button" v-on:click="$refs.datatable.performDatatableUpdate()" class="btn btn-secondary waves-effect waves-light">
                                        <i class="fa fa-search"></i>
                                        {{ trans.search }}
                                    </button>
                                </div>
                                <div class="col-sm-6 text-right">
                                    <button type="button" v-on:click="resetSearchFilterValues()" class="btn btn-warning waves-effect waves-light">
                                        <i class="fa fa-refresh"></i>
                                        {{ trans.reset }}
                                    </button>
                                </div>
                            </div>

                        </form>
                    </div> <!-- ./div class="card-body" -->
                </div> <!-- ./div class="card" -->
            </div> <!-- ./div class="col-4" (END RIGHT SECTION) -->
        </div> <!-- ./div class="row" -->

        <div class="row" v-show="show_bottom_buttons">
            <ml-insert-photo-buttons 
                class="col-12"
                v-bind:trans="insertButtonsText"
                v-bind:btn-save-disable="insertButtonDisabled"
                v-on:insert-save="$emit('insert-save')"
                v-on:insert-cancel="$emit('insert-cancel')"
                >
            </ml-insert-photo-buttons>
        </div>

    </div> <!-- ./div class="container-fluid" -->
</template>

<style scoped>
    .control-label {
        margin-bottom: 0;
    }
</style>

<script>

    export default {                
        props: {
            trans: Object,
            categoriesList: Array,
            licencesList: Array,
            datatableAjaxUrl: String,
            datatableInitialThumbId: String,
            datatableInitialThumbName: String,
            datatableThumbSizes: Array,
            dateranges: Object,
            startDate: String,
            endDate: String,
            tagsSourceUrl: String,
            tagsStoreUrl: String,
            tagsValueUrl: String,
            tagsValue: Array,
            sourceAjaxUrl: String,
            thumbSizeIdStorageKey: String,
            thumbSizeNameStorageKey: String,
            insertButtonDisabled: Boolean,
            insertButtonsText: Object
        },
        data: function () {
            return {
                state: {
                    category_id: null,
                    licence_id: null,
                    filename: '',
                    source: '',
                    start_date: this.startDate,
                    end_date: this.endDate,
                    thumb_size: this.datatableInitialThumbId,
                },
                view: {
                    dateranges: this.dateranges
                },
                table: {
                    datatableAjaxUrl: this.datatableAjaxUrl
                },
                tags:{
                    source_url: this.tagsSourceUrl,
                    store_url: this.tagsStoreUrl,
                    value_url: this.tagsValueUrl,
                    value: this.tagsValue
                }
            }
        },
        methods: {
            refreshDatatable(resetPaging) {
                this.$refs.datatable.performDatatableUpdate(resetPaging);
            },
            onDateRangeChanged(response) {
                this.state.start_date = response.start_date;
                this.state.end_date = response.end_date;
            },
            onUpdateDatatable() {
                //console.log("Datatable was just updated.")
            },
            onShowImageDatatable(imageObj) {
                this.$emit('photo-dbl-click', imageObj)
            },
            onEditImageDatatable(imageObj) {
                this.$emit('photo-edit', imageObj);
            },
            onDeletedImageDatatable() {
                this.$emit('photo-deleted');
            },
            onThumbSizeChange(val) {
                this.state.thumb_size = val;
                this.refreshDatatable(false);
            },
            resetSearchFilterValues() {
                this.state.category_id = null;
                this.state.licence_id = null;
                this.state.filename = '';
                this.state.source = '';
                this.tags.value = [];
                this.state.start_date = this.startDate;
                this.state.end_date = this.endDate;
                this.$refs.daterangepicker.setStartEndDates(this.startDate, this.endDate, 'mysql');
            }
        },
        computed: {
            /* 
             * koristi se za 'search' polja za 'datatable' (<ml-search-tab-datatable>) 
             */
            search_fields() { 
                return {
                    'category_id': this.state.category_id,
                    'licence_id': this.state.licence_id,
                    'filename': this.state.filename,
                    'source': this.state.source,
                    'tags': this.tags.value,
                    'start_date': this.state.start_date,
                    'end_date': this.state.end_date,
                    'thumb_size': this.state.thumb_size
                };
            },
            extended_categories_list() {
                let ecl = _.clone(this.categoriesList);
                ecl.unshift({'id': '0', 'text': this.trans.allCategories});
                return ecl;
            },
            extended_licences_list() {
                let ecl2 = _.clone(this.licencesList);
                ecl2.unshift({'id': '0', 'name': this.trans.allLicences});
                return ecl2;
            },
            show_bottom_buttons() {
                if(this.$parent.state.mode == 'sp') {
                    return this.$parent.state.active.imageObj.photoThumbSizeId;
                }
                else {
                    return true;
                }
            }
        },
        watch: {

        },
        mounted() {
            //console.log('SearchTabContentComponent mounted.')
        }
    }
</script>
