import Component from '@ember/component';
import { action } from '@ember/object';
import { equal } from '@ember/object/computed';

import safeComputed from '../computed/safe-computed';

export default Component.extend({
  tagName: '',

  phase: null,
  selection: null,
  onSelect() {},

  isCircling: equal('phase.type', 'circling'),
  isPowered: equal('phase.type', 'powered'),

  isCirclingLeft: equal('phase.circlingDirection', 'left'),
  isCirclingRight: equal('phase.circlingDirection', 'right'),

  glideRate: safeComputed('phase.glideRate', gr => (Math.abs(gr) > 1000 ? Infinity : gr)),

  selected: safeComputed('selection', function (selection) {
    let phase = this.phase;
    return selection.start === phase.secondsOfDay && selection.end === phase.secondsOfDay + phase.duration;
  }),

  handleClick: action(function () {
    let onSelect = this.onSelect;

    if (this.selected) {
      onSelect(null);
    } else {
      let phase = this.phase;
      onSelect({
        start: phase.secondsOfDay,
        end: phase.secondsOfDay + phase.duration,
      });
    }
  }),
});

@@ -194,16 +194,30 @@
 default 
+class extends 
 Componen
@@ -221,16 +221,9 @@
 nent
-.extend(
+ 
 %7B%0A  
@@ -233,81 +233,19 @@
 Name
-: '',%0A%0A  phase: null,%0A  selection: null,%0A  onSelect() %7B%7D,%0A%0A  isCircling: 
+ = '';%0A%0A  @
 equa
@@ -275,23 +275,24 @@
 ng')
-,%0A  isPowered: 
+ isCircling;%0A  @
 equa
@@ -321,29 +321,24 @@
 ed')
-,%0A%0A  isCirclingLeft: 
+ isPowered;%0A%0A  @
 equa
@@ -373,19 +373,16 @@
  'left')
-,%0A 
  isCircl
@@ -388,15 +388,17 @@
 ling
-Right: 
+Left;%0A  @
 equa
@@ -438,24 +438,30 @@
 ht')
-,%0A%0A  glideRate: 
+ isCirclingRight;%0A%0A  @
 safe
@@ -536,23 +536,24 @@
 gr))
-,%0A%0A  selected: 
+ glideRate;%0A%0A  @
 safe
@@ -741,42 +741,45 @@
   %7D)
-,%0A%0A  handleClick: action(function 
+%0A  selected;%0A%0A  @action%0A  handleClick
 () %7B
@@ -1029,11 +1029,7 @@
 %0A  %7D
-),%0A%7D);
+%0A%7D
 %0A

Convert to ES6 class