// ---------------------------------------------------------------------------------
//
// Component: Autocomplete 
//
// Input Props:
//      - id
//      - name
//      - required
//      - disabled
//      - placeholder
//      - sstyle
//      - value (to je v-model)
//      - model-text (ovo je samo trenutni text)
//      - search-results
//
//      <autocomplete id="ttt" name="ttt" v-model="ttt" model-text="tttext"></autocomplete>
//
Vue.component('autocomplete',
{
    props:
    [
        'id', 'name', 'sstyle', 'required', 'disabled', 'placeholder', 'value', 'modelText', 'searchResults', 'maxlength', 'minlength'
    ],
    data: function ()
    {
        return {
            query: '',
            cModelText: null
        }
    },
    computed:
    {
        hasSearchResultsListener()
        {
          return this.$listeners && this.$listeners.searchresults ? true : false
        }
    },
    mounted: function ()
    {
        var self = this;

        this.cModelText = this.modelText != undefined ? this.modelText : '';

        $(document).on('click',function(event) 
        { 
            //saznaj da li ima neko u grani iznad klasu: if($(event.target).parents('.autoc').length){};
            if( $(event.target).parent().hasClass('autoc') ) 
            { 
                $('.autoc-results').not($(event.target).next()).hide();
                $(this.$el).removeClass('opened');
            }    
            else
            {
                $('.autoc-results').hide();
                $('.autoc-results').parent().removeClass('opened');
            }    
        });
    },
    methods:
    {
        Search: function(e)
        {

            var self = this;
            var searchResults = $(this.$el).find('.autoc-results');
            var currSelected = $(searchResults).find('.selected');
            var offset = $(currSelected).position(); // ovo je pozicija unutar kontejnera (ako je div 200px max offset.top je 200, a ne duzina kompletne liste)

            $(self.$el).find('.autoc-results').hide();

            setTimeout(function()
            {
                //alert($(self.$el).find('.autoc-text').val());
                $(self.$el).find('.autoc-text').blur();
                $(searchResults).scrollTop(0);
                $(searchResults).removeClass('selected').children().first().addClass('selected');

                self.$emit('input', null);
                self.$emit('change', self.cModelText);

                if(self.hasSearchResultsListener)
                {
                    $(self.$el).addClass('spiner');
                    self.$emit('searchresults', self.cModelText);
                }
                $(self.$el).find('.autoc-text').focus();
            },100);
        },
        InputFocus: function()
        {
            if(this.searchResults.length > 0 &&  !$(this.$el).hasClass('spiner'))
            {
                $(this.$el).find('.autoc-results').slideDown(100);
                $(this.$el).addClass('opened');
            }
            
        },
        ResultClick: function(resultItem)
        {
            this.$emit('input', resultItem.id);
            this.$emit('change', resultItem.name);

            this.cModelText = resultItem.name;

            $(this.$el).find('.autoc-results').slideUp(100);
            $(this.$el).removeClass('opened');
        },
    },
    watch:{
        searchResults (val) 
        {
            $(this.$el).removeClass('spiner');
            if(val.length > 0)
            {
                $(this.$el).find('.autoc-results').slideDown(100);
                $(this.$el).addClass('opened');
            }
       },
       value (val)
       {
            this.value = val;
       },
       modelText (val)
       {
           this.cModelText = val;
       }
    },
    template: '<div class="autoc divAutoc">'+
              '      <input :id="id" :name="name" class="autoc-text" type="text" v-on:keyup="Search" v-on:focus="InputFocus" v-model="cModelText" :placeholder="placeholder" :disabled="disabled" :required="required" :maxlength="maxlength != undefined ? maxlength : \'180\'" :minlength="minlength != undefined ? minlength : \'0\'" autocomplete="ttt" />'+ 
              '      <div class="autoc-results">'+
              '          <div class="autoc-result" v-on:click="ResultClick(result)" :title="result.name" :result-id="result.id" :result-name="result.name" v-for="result in searchResults">{{result.name}}</div>'+
              '      </div>'+
              '  </div>'
});