$.widget('grom.dynamicList', {
    options: {
        addClass: '.js-dl-add',
        addBefore: '.js-dl-add-before',
        removeClass: '.js-dl-remove',
        itemClass: '.js-dl-item',
        popupClass: '.js-dl-popup',
        popupYesClass: '.js-dl-popup-yes',
        popupCloseClass: '.js-dl-popup-close'
    },
    _create: function () {
        this._initProps();
        this._intiObservers();
        this._render();
    },
    _initProps: function () {
        this.currentRemoveItem = $();
        this.$popup = $(this.options.popupClass);
    },
    _intiObservers: function () {
        this.element.find(this.options.addClass).click(this._onAddItem.bind(this));

        this.element.on('click', this.options.removeClass, this._onRemoveItem.bind(this));

        var yesBtn = $(this.options.popupClass).find(this.options.popupYesClass);
        yesBtn.on('click', this._onPopupYes.bind(this));
        yesBtn.on('touchstart', this._onPopupYes.bind(this));

        var closePopup = $(this.options.popupCloseClass);
        closePopup.on('click', this._hidePopup.bind(this));
        closePopup.on('touchstart', this._hidePopup.bind(this));
    },
    _onAddItem: function () {
        var itemHtml = $.parseHTML(this.options.itemString);

        if (typeof this.options.onItemCreate === 'function') {
            this.options.onItemCreate(itemHtml);
        }

        this.element.find(this.options.addBefore).before(itemHtml);

        this._render();
    },
    _onPopupYes: function () {
        this.currentRemoveItem.remove();
        this._render();
    },
    _onRemoveItem: function (event) {
        this.currentRemoveItem = $(event.target).parents(this.options.itemClass);
        this._showPopup();
    },
    _showPopup: function () {
        this.$popup.fadeIn();
    },
    _hidePopup: function () {
        this.$popup.fadeOut();
    },
    _render: function () {
        var items = this.element.find(this.options.itemClass);

        if (items.size() > 1) {
            items.find(this.options.removeClass).show();
            return;
        }

        items.find(this.options.removeClass).hide();
    }
});

$(function () {
    $('.js-cuisines-list').dynamicList({
        itemString: '<div class="flex-box selectbox-row js-dl-item">' +
        '<div class="selectbox-theme2 flex-item">' +
        '<select class="form-control js-form-control">' +
        '<option>European</option>' +
        '<option>Asian</option>' +
        '<option>American</option>' +
        '</select>' +
        '</div>' +
        '<div class="selectbox-theme2 flex-item">' +
        '<select class="form-control js-form-control">' +
        '<option>Italian</option>' +
        '<option>Argentine</option>' +
        '<option>Portuguese</option>' +
        '</select>' +
        '</div>' +
        '<div class="selectbox-theme2 flex-item">' +
        '<select class="form-control js-form-control">' +
        '<option>Sicilian</option>' +
        '<option>Sicilian</option>' +
        '<option>Sicilian</option>' +
        '</select>' +
        '</div>' +
        '<div class="flex-item flex-item-remove js-dl-remove">' +
        '<a href="javascript:;" class="form-control-icon bg-icon close-btn-small">' +
        '</a>' +
        '</div>' +
        '</div>',
        onItemCreate: function (html) {
            $(html).find('.js-form-control').select2({
                minimumResultsForSearch: Infinity
            });
        }
    });

    $('.js-location-list').dynamicList({
        itemString: '<div class="form-group row js-dl-item">' +
                '<div class="col-sm-4">' +
                    '<label class="form-control-label">Other location</label>' +
                '</div>' +
                '<div class="col-sm-8">' +
                '<div class="form-control-wrap has-close-control">' +
                    '<input id="step1" type="text" class="form-control" value="">' +
                    '<a href="javascript:;" class="form-control-icon bg-icon close-btn-small js-dl-remove">' +
                    '</a>' +
                '</div>' +
                '</div>' +
            '</div>',
        onItemCreate: function (html) {
            $(html).find('.js-form-control').select2({
                minimumResultsForSearch: Infinity
            });
        }
    });

    $('.js-dishes-list').dynamicList();
    $('.js-menus-list').dynamicList();
    $('.js-menu-creation-list').dynamicList();
    $('.js-recipes-list').dynamicList();
});