import Ember from 'ember';
import computedStyle from 'ember-computed-style';

export default Ember.Component.extend({
  classNames: ['assessment-timeline-node'],
  classNameBindings: ['type', 'proficiency'],  
  attributeBindings: ['style'],
  
  style: computedStyle('percentageX'),
  
  percentageX: Ember.computed('x', function() {
    return { left: this.get('x') }
  }),
  
  type: Ember.computed('assessment.type', function() {
    return `assessment-timeline-node-${this.get('assessment.type')}`;
  }),
  
  proficiency: Ember.computed('assessment.score', function() {
    const proficiency = this.get('assessment.is_proficient');
    if (proficiency) return `assessment-timeline-node-proficient`;
    return `assessment-timeline-node-not-proficient`;
  }),
});