import Component from '@ember/component';
import ModalBase from 'shared/mixins/modal-base';
import layout from './template';
import { get, set, computed } from '@ember/object';
import { inject as service } from '@ember/service';
import { loadScript, loadStylesheet, proxifyUrl } from 'shared/utils/load-script';
import { empty } from '@ember/object/computed';
import { all } from 'rsvp';

export default Component.extend(ModalBase, {
  layout,
  growl: service(),
  modalService: service('modal'),
  globalStore: service(),

  model: null,
  driver: null,
  onAdd: null,

  loading: true,
  editing: false,
  allNodeDrivers: null,

  showPicker: empty('model.id'),

  actions: {
    switchDriver(name) {
      set(this, 'driver', name);
    },

    saved() {
      const fn = get(this, 'onAdd');
      const model = get(this,'model');

      if ( fn ) {
        fn(model);
      }
    },

    hidePicker() {
      this.set('showPicker', false);
    },
  },

  availableDrivers: computed('allNodeDrivers.@each.state', function() {
    return get(this, 'allNodeDrivers').filterBy('state','active').sortBy('name');
  }),

  availableDriversGroups: computed('availableDrivers.@each.state', function() {
    const choices = get(this, 'availableDrivers');
    const group = [];
    let groupIndex = 0;
    choices.forEach((item, index) => {
      if (index % 5 === 0) {
        group.push([item]);
        groupIndex++;
      } else {
        group[groupIndex - 1].push(item);
      }
    });
    return group;
  }),

  didReceiveAttrs() {
    const opts = get(this,'modalService.modalOpts')||{};
    const originalModel = get(opts, 'nodeTemplate');
    if ( originalModel ) {
      set(this, 'model', originalModel);
      set(this, 'editing', true);
    } else {
      set(this,'model', get(this,'globalStore').createRecord({
        type: 'nodeTemplate',
      }));
    }

    let driver = get(this, 'driver');
    let override = get(opts, 'driver');

    if ( override ) {
      driver = override;
      set(this, 'showPicker', false);
    }

    set(this, 'onAdd', get(opts, 'onAdd'));

    return get(this, 'globalStore').findAll('nodeDriver').then((allNodeDrivers) => {
      set(this, 'allNodeDrivers', allNodeDrivers);

      const active = get(this, 'availableDrivers');

      if ( !driver || !active.findBy('name', driver) ) {
        driver = get(active, 'firstObject.name');
      }

      set(this, 'driver', driver);

      return this.loadCustomUi().then(() => {
        set(this, 'loading', false);
      });
    }).catch((err) => {
      get(this, 'growl').fromError(err);
      this.sendAction('close');
    });
  },

  // Loads the custom UI CSS/JS for drivers that have a uiUrl,
  loadCustomUi() {
    const promises = [];

    get(this, 'availableDrivers').forEach((driver) => {
      const name = get(driver, 'name');
      const uiUrl = get(driver, 'uiUrl');
      if ( uiUrl ) {
        const jsUrl  = proxifyUrl(driver.uiUrl, this.get('app.proxyEndpoint'));
        const cssUrl = proxifyUrl(driver.uiUrl.replace(/\.js$/,'.css'), this.get('app.proxyEndpoint'));
        promises.push(loadScript(jsUrl, `driver-ui-js-${name}`));
        promises.push(loadStylesheet(cssUrl, `driver-ui-css-${name}`));
      }
    });

    return all(promises);
  },

  driverObj: computed('driver', function() {
    return get(this, 'availableDrivers').filterBy('name', get(this, 'driver'))[0];
  }),
});