var itemPackage_form = {
    settings: {
        id: '',
        item_autocomplete_url: '',
        itemPackages: [],
    },
    init: function() {
        this.initAutocomplete();
        this.initItems();
    },
    initAutocomplete: function() {
        // global.autocomplete.bind(itemPackage_form.settings.device_autocomplete_url, '#device_item_desc', '#device_item');

        jQ(".itemPackage_itemPackageItem_item_description").each(function(i,el){
            let desc = jQ(el).attr('id');
            let id = jQ(el).siblings('.itemPackage_itemPackageItem_item').attr('id');
            global.autocomplete.bind(itemPackage_form.settings.item_autocomplete_url, '#'+desc, '#'+id,{
                onSelect: function(){
                    let itemPackage_id = jQ('#'+id);
                    if(itemPackage_form.settings.itemPackages.includes(itemPackage_id.val())) {
                        global.parseFlashMessages('#flash-messages-content-modal', 'warning', ['The item is already selected.']);
                        itemPackage_id.val('');
                        jQ('#'+desc).val('');
                    } else {
                        itemPackage_form.settings.itemPackages.push(itemPackage_id.val());
                    }
                    itemPackage_form.parseDetailId();
                }
            });

        });
    },
    parseDetailId: function() {
        itemPackage_form.settings.itemPackages = [];
        jQ(".itemPackageItems_itemPackageItem").each(function(i,el){
            if(jQ(el).val() != '')
                itemPackage_form.settings.itemPackages.push(jQ(el).val());
        });
    },
    initItems : function () {
        let initialIdx = jQ(".cc_row").length;
        let bindRemoveCc = function(){
            jQ(".remove_btn").unbind('click').bind('click', function(e){
                let idx = parseInt(jQ(this).data('idx'));
                jQ(`.cc_row[data-idx="${idx}"]`).remove();
            });
            console.debug('bind remove');
        };

        jQ("#add_btn").unbind('click').bind('click', function(e){
            let lastIdx = initialIdx;
            jQ(".cc_row").each(function(i, el){
                lastIdx = parseInt(jQ(el).data('idx'));
            });
            let idx = lastIdx + 1,
                row = jQ("<div>").attr({
                    class: 'cc_row row',
                    'data-idx': idx,
                }),
                col1 = jQ("<div>").attr({
                    class: 'cc_col1 small-12 columns',
                    'data-idx': idx,
                }),
                col2 = jQ("<div>").attr({
                    class: '',
                    'data-idx': idx,
                }),
                closeBtn = `<span class="remove_btn" data-idx="${idx}"><i class="fa fa-times-circle"></i></span>`,
                itemDescriptionTxt = jQ("<input>").attr({
                    type: 'text',
                    name: `item_package_form[itemPackageItems][${idx}][item_description]`,
                    id: `itemPackage_itemPackageItem_${idx}_item_description`,
                    class: `itemPackage_itemPackageItem_item_description hidden-cc-${idx}`,
                }),
                itemIdLabel = jQ("<label>").attr({
                    for: `itemPackage_itemPackageItem_${idx}_item`,
                    class: `hidden-cc-${idx} hide`,
                    id: `itemPackage_itemPackageItem_${idx}_item`
                }).html('Email'),
                itemIdTxt = jQ("<input>").attr({
                    type: 'hidden',
                    name: `item_package_form[itemPackageItems][${idx}][item]`,
                    id: `itemPackage_itemPackageItem_${idx}_item`,
                    class: `itemPackage_itemPackageItem_item hidden-cc-${idx}`,
                });
            col1.append(closeBtn);
            itemDescriptionTxt.appendTo(col1);
            itemIdLabel.appendTo(col2);
            itemIdTxt.appendTo(col2);
            col1.appendTo(row);
            // idTxt.appendTo(col2);
            col2.appendTo(row);
            row.appendTo("#cc_container");

            bindRemoveCc();
            console.debug('bind add');

            global.autocomplete.bind(
                itemPackage_form.settings.item_autocomplete_url,
                'input[name="item_package_form[itemPackageItems][' + idx + '][item_description]"]',
                'input[name="item_package_form[itemPackageItems][' + idx + '][item]"]'
            );
        });

        bindRemoveCc();
    }
};