import Component from '@ember/component';
import layout from './template';
import { get, set, computed, observer } from '@ember/object';
import { inject as service } from '@ember/service';
import { later, run } from '@ember/runloop';
import { randomStr } from 'shared/utils/util';

const CHANGE = 'change';
const SET = 'set';

export default Component.extend({
  layout,
  intl: service(),
  globalStore: service(),
  session: service(),
  router: service(),
  access: service(),

  showCurrent: true,
  generate: false,
  setOrChange: CHANGE,
  editLabel: 'modalEditPassword.actionButton',
  currentPassword: null,
  user: null,

  confirmBlurred: false,
  serverErrors: null,
  password: null,
  confirm: null,

  didReceiveAttrs() {
    if ( get(this, 'generate') ) {
      this.send('regenerate');
    }

    run.next(this, 'focusStart');
  },

  saveDisabled: computed('generate', 'password','confirm', function() {
    if ( get(this, 'generate') ) {
      return false;
    }

    const pass = (get(this, 'password') || '').trim();
    const confirm = (get(this, 'confirm') || '').trim();

    return !pass || !confirm || pass !== confirm;
  }),

  errors: computed('saveDisabled', 'confirm', 'confirmBlurred', 'serverErrors.[]', function() {
    let out = get(this, 'serverErrors')||[];

    if ( get(this, 'confirmBlurred') && get(this, 'confirm') && get(this, 'saveDisabled') ) {
      out.push(get(this, 'intl').t('modalEditPassword.mismatch'));
    }

    return out;
  }),

  focusStart() {
    const elem = $('.start')[0];
    if ( elem ) {
      elem.focus();
    }
  },

  generateChanged: observer('generate', function() {
    if ( get(this, 'generate') ) {
      set(this, 'password', randomStr(16,'password'));
    } else {
      set(this,'password','');
      set(this,'confirm','');
      run.next(this, 'focusStart');
    }
  }),

  actions: {
    regenerate() {
      this.generateChanged();
    },

    blurredConfirm() {
      set(this, 'confirmBlurred', true);
    },

    save(cb) {
      const user = get(this, 'user');
      const old = get(this, 'currentPassword') || '';
      const neu = get(this, 'password') || '';

      set(this, 'serverErrors', []);

      const setOrChange = get(this, 'setOrChange');
      let promise;
      if ( setOrChange === CHANGE ) {
        // @TODO-2.0 better way to call collection actions
        promise = get(this, 'globalStore').request({
          url: '/v3/users?action=changepassword',
          method: 'POST',
          data: {
            currentPassword: old.trim(),
            newPassword: neu.trim()
          }
        });
      } else if ( setOrChange === SET ) {
        promise = user.doAction('setpassword', {
          newPassword: neu.trim(),
        });
      }

      return promise.then(() => {
        return get(this, 'access').loadMe().then(() => {
          get(this, 'complete')(true);
          later(this, () => {
            if ( this.isDestroyed || this.isDestroying ) {
              return;
            }
            cb(true);
          }, 1000);
        });
      }).catch((err) => {
        set(this, 'serverErrors', [err.message]);
        get(this, 'complete')(false);
        cb(false);
      });
    },
  }
});