import Ember from 'ember';
import TooltipEnabled from '../mixins/sl-tooltip-enabled';

/**
 * @module components
 * @class  sl-progress-bar
*/
export default Ember.Component.extend( TooltipEnabled, {

    // -------------------------------------------------------------------------
    // Dependencies

    // -------------------------------------------------------------------------
    // Attributes

    /**
     * Class names for the root element
     *
     * @property {array} classNames
     */
    classNames: [ 'progress', 'sl-progress-bar' ],

    /**
     * Class name bindings for the root element
     *
     * @property {array} classNameBindings
     */
    classNameBindings: [ 'isLowPercentage:sl-progress-bar-low-percentage' ],

    // -------------------------------------------------------------------------
    // Actions

    // -------------------------------------------------------------------------
    // Events

    // -------------------------------------------------------------------------
    // Properties

    /**
     * Whether to animate the progress bar or not
     *
     * @property {boolean} active
     * @default  false
     */
    animated: false,

    /**
     * Whether to display a text value over the progress
     *
     * @property {boolean} label
     * @default  false
     */
    label: false,

    /**
     * The Bootstrap "theme" style name
     *
     * @property {string} theme
     * @default  "default"
     */
    theme: 'default',

    /**
     * The progress value as an integer (out of 100)
     *
     * @property {number} value
     * @default  0
    */
    value: 0,

    // -------------------------------------------------------------------------
    // Observers

    // -------------------------------------------------------------------------
    // Methods

    /**
     * Whether the progress value is below a certain level
     *
     * @property {boolean} isLowPercentage
     */
    isLowPercentage: function() {
        return this.get( 'value' ) < 50;
    }.property( 'value' ),

    /**
     * Inline style string for progress bar element
     *
     * @property {string} styleString
     */
    styleString: function() {
        return 'width: ' + this.get( 'value' ) + '%;';
    }.property( 'value' ),

    /**
     * Element-specific class name for the Bootstrap "theme" style
     *
     * @property {string} themeClassName
     * @default "progress-bar-default"
     */
    themeClassName: function() {
        return 'progress-bar-' + this.get( 'theme' );
    }.property( 'theme' ),

    // -------------------------------------------------------------------------
    // Private Methods

});

@@ -1907,42 +1907,82 @@
  * @
-property %7Bboolean%7D isLowPercentage
+function isLowPercentage%0A     * @observes value%0A     * @returns  %7Bboolean%7D
 %0A   
@@ -2168,37 +2168,83 @@
  * @
-property %7Bstring%7D style
+function styleString%0A     * @observes value%0A     * @returns  %7BEmber.
 String
+%7D
 %0A   
@@ -2451,33 +2451,24 @@
      * @
-property %7Bstring%7D
+function
  themeCl
@@ -2487,38 +2487,54 @@
  * @
-default %22progress-bar-default%22
+observes theme%0A     * @returns  %7BEmber.String%7D
 %0A   

Refactor to follow style guidelines