/** @babel */
/** @jsx etch.dom */

import etch from 'etch'
import EtchComponent from './etch-component'
import UpdateManager from './update-manager'

class UpdateView extends EtchComponent {
  constructor (props) {
    super(props)

    if (this.props.updateManager.getAutoUpdatesEnabled() && this.props.updateManager.getState() === UpdateManager.State.Idle) {
      this.props.updateManager.checkForUpdate()
    }
  }

  handleAutoUpdateCheckbox (e) {
    atom.config.set('core.automaticallyUpdate', e.target.checked)
  }

  shouldUpdateActionButtonBeDisabled () {
    let {state} = this.props.updateManager
    return state === UpdateManager.State.CheckingForUpdate || state === UpdateManager.State.DownloadingUpdate
  }

  executeUpdateAction () {
    if (this.props.updateManager.state === UpdateManager.State.UpdateAvailableToInstall) {
      this.props.updateManager.restartAndInstallUpdate()
    } else {
      this.props.updateManager.checkForUpdate()
    }
  }

  renderUpdateStatus () {
    let updateStatus = null

    switch (this.props.updateManager.state) {
      case UpdateManager.State.Idle:
        updateStatus = (
          <div className='about-updates-item is-shown about-default-update-message'>
            {this.props.updateManager.getAutoUpdatesEnabled() ? 'Atom will check for updates automatically' : 'Automatic updates are disabled please check manually'}
          </div>
        )
        break
      case UpdateManager.State.CheckingForUpdate:
        updateStatus = (
          <div className='about-updates-item app-checking-for-updates' ref='checkingForUpdates'>
            <span className='about-updates-label icon icon-search'>Checking for updates...</span>
          </div>
        )
        break
      case UpdateManager.State.DownloadingUpdate:
        updateStatus = (
          <div className='about-updates-item app-downloading-update' ref='downloadingUpdate'>
            <span className='loading loading-spinner-tiny inline-block' />
            <span className='about-updates-label'>Downloading update</span>
          </div>
        )
        break
      case UpdateManager.State.UpdateAvailableToInstall:
        updateStatus = (
          <div className='about-updates-item app-update-available-to-install' ref='updateAvailableToInstall'>
            <span className='about-updates-label icon icon-squirrel'>New update</span>
            <span className='about-updates-version'>{this.props.availableVersion}</span>
            <a className='about-updates-release-notes' onclick={this.props.viewUpdateReleaseNotes}>Release Notes</a>
          </div>
        )
        break
      case UpdateManager.State.UpToDate:
        updateStatus = (
          <div className='about-updates-item app-up-to-date' ref='upToDate'>
            <span className='icon icon-check' />
            <span className='about-updates-label is-strong'>Atom is up to date!</span>
          </div>
        )
        break
      case UpdateManager.State.Error:
        updateStatus = (
          <div className='about-updates-item app-update-error'>
            <span className='icon icon-x' />
            <span className='about-updates-label app-error-message is-strong'>
              {this.props.updateManager.getErrorMessage()}
            </span>
          </div>
        )
        break
    }

    return updateStatus
  }

  render () {
    return (
      <div className='about-updates group-start' style={{
        display: this.props.updateManager.state === UpdateManager.State.Unsupported ? 'none' : 'block'
      }}>
        <div className='about-updates-box'>
          <div className='about-updates-status'>
            {this.renderUpdateStatus()}
          </div>

          <button className='btn about-update-action-button' disabled={this.shouldUpdateActionButtonBeDisabled()} onclick={this.executeUpdateAction.bind(this)}>
            {this.props.updateManager.state === 'update-available' ? 'Restart and install' : 'Check now'}
          </button>
        </div>

        <div className='about-auto-updates'>
          <label>
            <input type='checkbox' checked={this.props.updateManager.getAutoUpdatesEnabled()} onchange={this.handleAutoUpdateCheckbox.bind(this)}/>
            <span>Automatically download updates</span>
          </label>
        </div>

      </div>
    )
  }
}

export default UpdateView

@@ -1569,35 +1569,10 @@
 tes'
- ref='checkingForUpdates'
 %3E%0A
+
     
@@ -1853,32 +1853,8 @@
 ate'
- ref='downloadingUpdate'
 %3E%0A  
@@ -2206,39 +2206,8 @@
 all'
- ref='updateAvailableToInstall'
 %3E%0A  
@@ -2596,32 +2596,32 @@
 pdateStatus = (%0A
+
           %3Cdiv c
@@ -2668,23 +2668,8 @@
 ate'
- ref='upToDate'
 %3E%0A  

Remove unnecessary JSX refs