import Component from '@ember/component'
import { observer, computed } from '@ember/object'
import { equal }  from '@ember/object/computed'
import { scheduleOnce } from '@ember/runloop'

import layout from 'leaf-semantic-core/templates/components/leaf-ui-button'

Button = Component.extend(
  layout: layout
  tagName: 'button'

  classNames: ['ui', 'button']
  classNameBindings: [
    'basic', 'active', 'disabled',
    'primary', 'loading', 'toggle',
    'fluid' , 'circular', 'animated',
    'animatedCls', 'icon:icon', 'labeled',
    'labeledCls', 'color', 'inverted'
  ]



  # button states
  active: false
  disabled: false
  loading: false

  state: 'default'
  reset: null

  # button variants
  basic: false
  primary: false
  toggle: false
  fluid: false
  circular: false
  animated: false
  labeled: false
  inverted: false

  # button shortcuts
  icon: null
  label: null
  color: null

  # action parameters
  bubble: false
  value: null


  animatedCls: computed('animated', -> 'animated' if (@animated && (typeof @animated is 'string')))
  labeledCls: computed('labeled', -> 'labeled' if (@labeled && (typeof @labeled is 'string')))

  isDefault: equal('state', 'default')
  isPending: equal('state', 'pending')
  isFulfilled: equal('state', 'fulfilled')
  isRejected: equal('state', 'rejected')
  isSettled: computed.or('isFulfilled', 'isRejected')


  resetState: ->
    @set('state', 'default')

  resetObserver: observer('reset', ->
    scheduleOnce('actions', this, 'resetState') if @get('reset')
  )

  'on-click': null

  click: (->
    action = @get('on-click')
    if action
      promise = (action)(@value)
      if (promise && typeof promise.then == 'function' && !@get('isDestroyed'))
        @set('state', 'pending')
        promise.then( => @set('state', 'fulfilled') unless @get('isDestroyed')).catch( => @set('state', 'rejected') unless @get('isDestroyed'))

      return @bubble
  )

  init: ->
    this._super(arguments...)
    @get('reset')
)

export default Button