import Ember from 'ember';

const {
  Component,
  isBlank
} = Ember;

/*
---
name: Stat
category: Components
---

Providing numbered insights to users.

```stat.html
<div class="upf-stat">
  <span class="upf-stat__name">Stat Name</span>
  <span class="upf-stat__data">30</span>
</div>
```

```types.handelbars
{{upf-stat name='Lorem' data=12}}
```


### Options
-------
Use any of the available stats types to quickly create a styled stat.

```types.handlebars
<!-- Standard button -->
{{upf-stat name='Lorem' data=12}}
```


### Available Sizes
-----
Need different sizes to fit your design. Add `small=true` or `xsmall=true`
for additional sizes.

```sizes.html
<div class="col-xs-4">
  <div class="upf-stat upf-stat--small">
    <span class="upf-stat__name">Standard</span>
    <span class="upf-stat__data">30</span>
  </div>
</div>

<div class="col-xs-4">
  <div class="upf-stat upf-stat--small">
    <span class="upf-stat__name">Small</span>
    <span class="upf-stat__data">30</span>
  </div>
</div>

<div class="col-xs-4">
  <div class="upf-stat upf-stat--x-small">
    <span class="upf-stat__name">Extra Small</span>
    <span class="upf-stat__data">30</span>
  </div>
</div>
```
```types.handlebars
<!-- Standard size stat -->
{{upf-stat name="Extra Small" data=30}}

<!-- Small stat -->
{{upf-stat name="Small" data=30 small=true}}

<!-- Extra Small stat -->
{{upf-stat name="Extra Small" data=30 xsmall=true}}
```
*/

export default Component.extend({
  classNames: ['upf-stat'],
  classNameBindings: [
    'small:upf-stat--small', 'xsmall:upf-stat--x-small'
  ],

  small: null,
  xsmall: null,
  name: null,
  data: null,
  dataClass: null,
  label: null,

  icon: null,
  iconPlacement: 'top',
  iconClass: '',
  iconUrl: null,
  iconLabel: null,

  didRender() {
    if (!isBlank(this.get('iconLabel'))) {
      this.$('[title]')
        .tooltip({ placement: 'bottom' })
        .attr('title', this.get('iconLabel'))
        .tooltip('fixTitle');
    }
  }
});

@@ -297,18 +297,18 @@
 pes.hand
-e
 l
+e
 bars%0A%7B%7Bu
@@ -329,34 +329,34 @@
 Lorem' data=
-12
+30
 %7D%7D%0A%60%60%60%0A%0A
 %0A### Options
@@ -339,25 +339,24 @@
 a=30%7D%7D%0A%60%60%60%0A%0A
-%0A
 ### Options%0A
@@ -438,91 +438,373 @@
 t.%0A%0A
-%60%60%60types.handlebars%0A%3C!-- Standard button --%3E%0A%7B%7Bupf-stat name='Lorem' data=12%7D%7D%0A%60%60%60%0A
+#### Custom Data Class%0A%0A%60%60%60custom-data-class.html%0A%3Cdiv class=%22upf-stat%22%3E%0A  %3Cspan class=%22upf-stat__name%22%3EStat Name%3C/span%3E%0A  %3Cspan class=%22upf-stat__data text-color-success%22%3E30%3C/span%3E%0A%3C/div%3E%0A%60%60%60%0A%0A%60%60%60types.handlebars%0A%7B%7Bupf-stat name='Lorem' data=12 dataClass='text-color-feedback-success'%7D%7D%0A%60%60%60%0A%0A%60%60%60types.less%0A.text-color-success %7B%0A  color: @upf-feedback-success;%0A%7D%0A%60%60%60
 %0A%0A##
@@ -984,32 +984,16 @@
 upf-stat
- upf-stat--small
 %22%3E%0A    %3C
@@ -1447,16 +1447,17 @@
 iv%3E%0A%60%60%60%0A
+%0A
 %60%60%60types

fix some documentation errors in the upf-stat component