const $ = require('jquery');
const _ = require('underscore');
const Backbone = require('backbone');
const request = require('request');
const { get } = require('lodash');
const { reduceNearby } = require('./reducers');

// console.notificationsTitle = 'Nearby';

const fsItem = Backbone.Model.extend({

});

const FSCollection = Backbone.Collection.extend({
  'model': fsItem
});

const fsCollection = new FSCollection();

const fsItemView = Backbone.View.extend({
  'tagName': 'div',
  'className': 'itemRow mui--align-middle',
  'template': _.template(`
<span class="mui--text-dark mui--text-subhead"><%= name %></span> <span class="mui--text-caption mui--text-dark-secondary"><%= category %></span>      `),
  'initialize': function() {
    this.render();
  },
  'attributes': function() {
    return {
      'data-id': this.model.id
    };
  },

  'render': function() {
    this.$el.html(this.template(this.model.toJSON()));
  }
});

const NearbyModel = Backbone.Model.extend({
  'initialize': function() {
    this.fsCollection = fsCollection;
    this.listenTo(this, 'change:llFixed', this.onChange);
  },
  'onChange': function() {
    this.getNearby();
  },
  'getNearby': function() {
    const llFixed = this.get('llFixed');
    request({
      'url': 'https://jubilee.silvrtree.co.uk/fsexplore',
      'method': 'GET',
      'qs': {
        'll': llFixed,
        'section': 'topPicks'
      }
    }, function(err, res, body) {
      if (err)
        console.error(err);
      else {
        const fsJSON = JSON.parse(body);
        const groups = get(fsJSON, 'response.groups');
        const items = groups[0].items;
        const newItems = [];
        for(const item of items)
          newItems.push(reduceNearby(item));

        this.fsCollection.reset(newItems);
      }
    }.bind(this));
  }
});

const NearbyView = Backbone.View.extend({
  'id':'nearby',
  'className': '',
  'initialize': function(options) {
    this.eventBus = options.eventBus;
    this.location = options.location;
    this.fsCollection = fsCollection;

    // this.model.bind('change', this.render, this);
    this.location.bind('change', this.updateLocation, this);

    this.$nearby = $('#nearby');

    /* this.fsCollection.on('all', function(eventName) {
      console.log(`${eventName } was triggered!`);
    });*/

    this.fsCollection.bind('reset', this.render, this);
  },
  'events': {
    'click': 'doClick'
  },
  'updateLocation': function(l) {
    console.log('>> Nearby Location has changed...');

    if (l.has('location')) {
      const location = l.get('location');
      if (location.hasOwnProperty('atHome'))
        this.model.set(location);
    }
    else
      console.log('>> Nearby No location yet');
  },
  'blah': function() {
    console.log('nearby render');
  },
  'render': function() {
    console.log('Nearby:Render');

    this.$el.empty();
    this.fsCollection.each(function(item) {
      const fsView = new fsItemView({ 'model': item });
      this.$el.append(fsView.el);
      // this.$el.append(personView.el); // adding all the person objects.
    }, this);
    this.$el.parent().show();
  },
  'doClick': function(d) {
    console.log('Do click', d);
  }

});

module.exports = { NearbyModel, NearbyView };
55.949443, -4.570721
