import React, { PropTypes, Component } from 'react'
import Loading from 'main/components/Loading'
import detectLanguage from '../detectLanguage'
import translate from '../translate'
import getTargetLanguage from '../getTargetLanguage'
import { LANGS, DISPLAY_NAMES } from '../constants'
import { bind } from 'lodash-decorators'
import sortBy from 'lodash/sortBy'
import Select from 'react-select'
import styles from './styles.css'


const OPTIONS = sortBy(LANGS, lang => DISPLAY_NAMES[lang]).map(lang => ({
  value: lang,
  label: DISPLAY_NAMES[lang]
}))

const WEB_URL = 'http://translate.yandex.com/'

// Detect source language and detect target language by it
class Preview extends Component {
  constructor(props) {
    super(props)
    this.state = {
      error: false,
      loading: true,
      sourceLang: props.sourceLang,
      targetLang: props.targetLang,
      translation: props.translation,
    }
  }

  componentDidMount() {
    const { text, sourceLang, targetLang, userLang } = this.props
    const detect = sourceLang ? Promise.resolve(sourceLang) : detectLanguage(text)
    detect.then(from => {
      const to = targetLang || getTargetLanguage(from, userLang)
      return translate(text, `${from}-${to}`)
    }).then(this.handleTranslation).catch(this.handleError)
  }

  /**
   * Get handler for chaning source or target language
   *
   * @param  {String} field
   * @return {Function}
   */
  onChangeLanguage(field) {
    return ({ value }) => {
      this.setState({ [field]: value }, () => {
        const { sourceLang, targetLang } = this.state
        translate(this.props.text, `${sourceLang}-${targetLang}`).then(
          this.handleTranslation,
          this.handleError
        )
      })
    }
  }

  @bind()
  handleTranslation({ lang, text }) {
    const [sourceLang, targetLang] = lang.split('-')
    this.setState({
      loading: false,
      translation: text,
      sourceLang,
      targetLang
    })
  }

  @bind()
  handleError() {
    this.setState({ error: true })
  }

  render() {
    const { error, loading, translation, sourceLang, targetLang } = this.state
    if (error) return <div>Can't translate.</div>
    if (loading) return <Loading />
    return (
      <div className={styles.wrapper}>
        <div className={styles.controls}>
          <Select
            className={styles.select}
            value={sourceLang}
            options={OPTIONS}
            clearable={false}
            onChange={this.onChangeLanguage('sourceLang')}
          />
          →
          <Select
            className={styles.select}
            value={targetLang}
            options={OPTIONS}
            clearable={false}
            onChange={this.onChangeLanguage('targetLang')}
          />
        </div>
        {translation.map(text => <div>{text}</div>)}
        <div className={styles.poweredBy} onClick={() => this.props.openUrl(WEB_URL)}>
          Powered by Yandex.Translate
        </div>
      </div>
    )
  }
}

Preview.propTypes = {
  openUrl: PropTypes.func.isRequired,
  userLang: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired,
  targetLang: PropTypes.string,
  sourceLang: PropTypes.string,
  translation: PropTypes.string,
}

export default Preview

@@ -91,16 +91,62 @@
 oading'%0A
+import %7B Button %7D from 'main/components/Form'%0A
 import d
@@ -180,24 +180,24 @@
 ctLanguage'%0A
-
 import trans
@@ -1556,20 +1556,67 @@
  %7D, 
-() =%3E %7B%0A    
+this.updateTranslation )%0A    %7D%0A  %7D%0A%0A  updateTranslation()%7B%0A
     
@@ -1657,28 +1657,24 @@
  this.state%0A
-    
     translat
@@ -1731,28 +1731,24 @@
 then(%0A      
-    
 this.handleT
@@ -1759,20 +1759,16 @@
 lation,%0A
-    
       th
@@ -1790,21 +1790,222 @@
     
-    )%0A      %7D
+)%0A  %7D%0A%0A  swapLanguages() %7B%0A    return () =%3E %7B%0A      this.setState(%0A        %7B%0A          sourceLang: this.state.targetLang,%0A          targetLang: this.state.sourceLang%0A        %7D,%0A        this.updateTranslation%0A      
 )%0A  
@@ -2801,9 +2801,134 @@
     
-%E2%86%92
+%3CButton%0A            label=%22%E2%87%84%22%0A            description='Swap languages'%0A            onClick=%7Bthis.swapLanguages()%7D%0A          /%3E
 %0A   

add button to swap languages