var component =
    {
        extends: BaseDataComponent,
        mixins: [FormField, ActionsHandlerMixin],
        template: '#template-name#',
        props: [
            'value',
            'options',
            'multiple',
            'ajaxSearch',
            'ajaxOnLoad',
            'tagger',
            'setDefaultValueAsFirstOption',
            'groups',
        ],
        data: function () {
            return {
                options_: [],
                multiple_: '',
                ajaxSearch_: '',
                ajaxOnLoad_: '',
                tagger_: false,
                value_: [],
                selectize_: null,
                setDefaultValueAsFirstOption_: false,
                isCreated_: false,
                groups_: []
            };
        },
        created: function () {
            this.$nextTick(function () {
                this.selectize_ = $("[data-field-name='" + this.name_ + "']").selectize({
                    plugins: this.multiple_ ? ['remove_button'] : [],
                    valueField: 'value',
                    labelField: 'name',
                    searchField: ['name'],
                    options: this.options_,
                    create: this.tagger_,
                    preload: this.ajaxOnLoad_,
                    optgroupField: 'group',
                    optgroupLabelField: 'name',
                    optgroupValueField: 'value',
                    optgroups: this.groups_,
                    load: this.ajaxOnLoad_ || this.ajaxSearch_ ? this.loadData : null,
                    wrapperClass: 'selectize-control',
                    items: this.getValues(),
                    onChange: function (value) {
                        this.value_ = value;
                        this.onChange();
                    }.bind(this)
                })[0].selectize;
                
                this.isCreated_ = true;
            }.bind(this));
        },
        beforeDestroy: function () {
            if (this.selectize_)
            {
                this.selectize_.destroy();
            }
        },
        methods: {
            loadData: function (query, callback) {
                this.loadDataFromServer_({
                    query: query
                }, this.ajaxData_).then(function () {
                    callback(this.options_);
                }.bind(this));
            },
            getValues: function () {
                if (this.value_ == '' && this.setDefaultValueAsFirstOption_ && this.options_)
                {
                    return [this.options_[0].value];
                }
                
                return Array.isArray(this.value_) ? this.value_ : [this.value_];
            },
            
            getPlaceholderByFieldConfiguration : function () {

                if (this.ajaxSearch_) {
                    return this.translations_['search_placeholder'];
                } else if (this.tagger_) {
                    return this.translations_['tagger_placeholder'];
                }
                
                return this.translations_['static_placeholder'];
            },
            onReload: function (data = {}) {
                this.propagateSlotsData_(data.slots ? data.slots : []);
                this.loadDataFromServer_({}, this.ajaxData_).then(function () {
                    this.selectize_.clearOptions();
                    this.selectize_.addOption(this.options_);
                    this.selectize_.setValue(this.getValues());
                }.bind(this));
            },
        },
        computed: {
            fieldName_: function () {
                return this.multiple_ ? this.name_ + '[]' : this.name_;
            },
            getPlaceholder_: function () {
                return this.placeholder ? this.placeholder : this.getPlaceholderByFieldConfiguration();
            }
        },
    }