import Em from 'ember';

export default Em.Component.extend({
  classNames: ['container'],
  elementId: 'bridgeControls',

  bridgeIp: null,
  manualBridgeIp: null,
  bridgeUsername: null,

  updateGroupsData: true,
  groupsData: null,
  lightsData: null,

  activeLights: [],
  groupControlDisplayed: false,
  appSettingsDisplayed: false,

  actions: {
    changeTab: function(tabName){
      var index = this.get('tabList').indexOf(tabName);
      this.set('selectedTab', index);
      localStorage.setItem('huegasm.selectedTab', index);
    },

    toggleGroupControl: function(){
      this.toggleProperty('groupControlDisplayed');
    },

    toggleAppSettings: function(){
      this.toggleProperty('appSettingsDisplayed');
    },

    clearBridge: function() {
      delete localStorage['huegasm.bridgeUsername'];
      delete localStorage['huegasm.bridgeIp'];
      location.reload();
    },

    clearAllSettings: function() {
      localStorage.clear();
      location.reload();
    }
  },

  // automatically close the group menu when the user clicks somewhere else
  click: function() {
    if(this.get('groupControlDisplayed') && !event.target.classList.contains('group') && !Em.$(event.target).closest('#groupControls').length) {
      this.toggleProperty('groupControlDisplayed');
    }

    if(this.get('appSettingsDisplayed') && !event.target.classList.contains('settings') && !Em.$(event.target).closest('#appSetting').length) {
      this.toggleProperty('appSettingsDisplayed');
    }
  },

  apiURL: function(){
      return 'http://' + this.get('bridgeIp') + '/api/' + this.get('bridgeUsername');
  }.property('bridgeIp', 'bridgeUsername'),

  didInsertElement: function(){
    // here's a weird way to automatically initialize bootstrap tooltips
    var observer = new MutationObserver(function(mutations) {
      var haveTooltip = !mutations.every(function(mutation) {
        return Em.isEmpty(mutation.addedNodes) || Em.isNone(mutation.addedNodes[0].classList) || mutation.addedNodes[0].classList.contains('tooltip');
      });

      if(haveTooltip) {
        Em.run.once(this, function(){
          Em.$('.bootstrapTooltip').tooltip();
        });
      }
    });
    observer.observe(Em.$('#bridgeControls')[0], {childList: true, subtree: true});
  },

  init: function() {
    this._super();

    if(!this.get('trial')) {
      this.doUpdateGroupsData();
      this.set('lightsDataIntervalHandle', setInterval(this.updateLightData.bind(this), 1000));
    }

    if (localStorage.getItem('huegasm.selectedTab')) {
      this.set('selectedTab', Number(localStorage.getItem('huegasm.selectedTab')));
    }
  },

  onUpdateGroupsDataChange: function(){
    if(this.get('updateGroupsData')){
      var self = this;
      setTimeout(function(){ self.doUpdateGroupsData(); }, 1000);
    }
  }.observes('updateGroupsData'),

  doUpdateGroupsData: function(){
    var self = this;

    Em.$.get(this.get('apiURL') + '/groups', function (result, status) {
      if (status === 'success' ) {
        self.set('groupsData', result);
      }
    });

    this.toggleProperty('updateGroupsData');
  },

  tabList: ["Lights", "Music"],
  selectedTab: 0,
  tabData: function(){
    var tabData = [], selectedTab = this.get('selectedTab');

    this.get('tabList').forEach(function(tab, i){
      var selected = false;

      if(i === selectedTab){
        selected = true;
      }

      tabData.push({"name": tab, "selected": selected });
    });

    return tabData;
  }.property('tabList', 'selectedTab'),

  lightsTabSelected: Em.computed.equal('selectedTab', 0),
  musicTabSelected: Em.computed.equal('selectedTab', 1),

  updateLightData: function(){
    var self = this;

    Em.$.get(this.get('apiURL') + '/lights', function (result, status) {
      if (status === 'success' && JSON.stringify(self.get('lightsData')) !== JSON.stringify(result) ) {
        self.set('lightsData', result);
      } else if(status !== 'success') {
        // something went terribly wrong ( user got unauthenticated? ) and we'll need to start all over
        clearInterval(self.get('lightsDataIntervalHandle'));
        this.setProperties({
          bridgeIp: null,
          bridgeUsername: null
        });
      }
    });
  },

  ready: function() {
    return this.get('trial') || !Em.isNone(this.get('lightsData'));
  }.property('lightsData', 'trial')
});
