<aura:component>
    <ltng:require scripts="{!join(',',
                                $Resource.jquery_3_2_1_min_JS,
                                $Resource.PUBSUB_EventBus2_JS
                            )}"
        afterScriptsLoaded="{!c.demonstrate}"
    />

    <aura:attribute access="private" type="String" name="tags" />

    <lightning:input aura:id="query" name="tag" label="Tag" value="{!v.tags}" />
    <lightning:button variant="brand" label="Submit" onclick="{!c.searchFlicker}"/>

    <div aura:id="lastQuery"></div>
    <ol aura:id="searchResults"></ol>
</aura:component>

({
    demonstrate : function(component, event, helper) {
        $Jsdp.EventBus2.subscribe('/search/tags', helper.displayLastQuery(component));
        $Jsdp.EventBus2.subscribe('/search/resultSet', helper.performSearch(component));
        $Jsdp.EventBus2.subscribe('/search/tags', helper.displayResultTemplate(component));
    },

    searchFlicker : function(component, event, helper) {
        var tags = component.get('v.tags').trim();
        if (tags) {
            $Jsdp.EventBus2.publish('/search/tags', [tags]);
        }
    }
})

({
    displayLastQuery : function(component) {
        return function(topic, tags) {
            component.find('lastQuery')
                .getElement()
                .innerHTML = '<p> Searched for: '
                                + '<strong>' + tags + '</strong>'
                            + '</p>';
        }
    },

    performSearch : function(component) {
        var self = this;
        return function(topic, tags) {
            var params = {results: tags};
            $A.createComponent('c:PUBSUB_FlickerSearchResults', params, self.appendResults(component));
        };
    },

    appendResults : function(component) {
        return function(newElement, status, errorMessage) {
            if (status === 'SUCCESS') {
                var renderBox = component.find('searchResults');
                var body = renderBox.get('v.body') || [];
                body.push(newElement);
                renderBox.set('v.body', body);
            }
            else {
                console.error('Something went wrong!:', errorMessage);
            }
        };
    },

    displayResultTemplate : function(component) {
        var self = this;
        return function(topic, tags) {
            var params = {
                tags: tags,
                tagmode: 'any',
                format: 'json'
            };
            $.getJSON(
                'http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?',
                params,
                self.publishResultSet
            );
       }
    },

    publishResultSet: function(data) {
        if (data && data.items && data.items.length) {
            $Jsdp.EventBus2.publish('/search/resultSet', {items: data.items});
        }
    }
})