import { reads, sort } from '@ember/object/computed';
import Component from '@ember/component';
import { computed } from '@ember/object';
import { loc } from '@ember/string';
import layout from '../templates/components/paper-stepper';
import { ParentMixin } from 'ember-composability-tools';

function computedFallbackIfUndefined(fallback) {
  return computed({
    get() {
      return fallback;
    },
    set(_, v) {
      return v === undefined ? fallback : v;
    }
  });
}

export default Component.extend(ParentMixin, {
  layout,
  tagName: 'md-stepper',
  classNameBindings: ['vertical::layout-column'],

  stepComponent: 'paper-step',

  linear: computedFallbackIfUndefined(true),
  vertical: computedFallbackIfUndefined(false),

  // fallback to 0 if is undefined
  currentStep: computedFallbackIfUndefined(0),
  currentStepLabel: computed('currentStep', function() {
    return this.get('currentStep') + 1;
  }),
  totalSteps: reads('steps.length'),

  steps: sort('childComponents', function(a, b) {
    if (a.get('stepNumber') > b.get('stepNumber')) {
      return 1;
    } else if (a.get('stepNumber') < b.get('stepNumber')) {
      return -1;
    }
    return 0;
  }),

  mobileHeaderTemplate: 'Step %@ of %@',
  mobileHeaderLabel: computed('mobileHeaderTemplate', 'currentStepLabel', 'totalSteps', function() {
    let { mobileHeaderTemplate, currentStepLabel, totalSteps } = this.getProperties('mobileHeaderTemplate', 'currentStepLabel', 'totalSteps');
    return loc(mobileHeaderTemplate, [currentStepLabel, totalSteps]);
  }),

  goTo(stepNumber) {
    if (stepNumber < this.get('totalSteps') && this.get('onStepChange')) {
      this.get('onStepChange')(stepNumber);
    }
  },

  nextStep() {
    if (this.get('currentStep') < this.get('totalSteps')) {
      let nextStep = this.get('currentStep') + 1;
      if (this.get('onStepChange')) {
        this.get('onStepChange')(nextStep);
      }
      if (nextStep === this.get('totalSteps') && this.get('onStepperCompleted')) {
        this.get('onStepperCompleted')();
      }
    }
  },

  previousStep() {
    if (this.get('currentStep') > 0 && this.get('onStepChange')) {
      this.get('onStepChange')(this.get('currentStep') - 1);
    }
  },

  registerChild(childComponent) {
    this._super(...arguments);
    // automatically set stepNumber if not manually set
    if (childComponent.get('stepNumber') === undefined) {
      let stepNumber = this.childComponents.get('length');
      childComponent.set('stepNumber', stepNumber - 1);
    }

    this.updateLabels();
  },

  unregisterChild() {
    this._super(...arguments);
    this.updateLabels();
  },

  updateLabels() {
    // update labels based on the sorted index
    this.get('steps').forEach((c, i) => {
      if (c.get('orderedIndex') !== i) {
        c.set('orderedIndex', i);
      }
    });
  },
  actions:{
    onStepClick(step){
      if(this.get('linear')){
        return;
      }
      if(this.onStepClick){
        this.onStepClick(this.get('goTo'),step.stepNumber);
      }else{
        this.goTo(step.stepNumber);
      }
    }
  }
});
