import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {injectIntl} from 'react-intl';
import RaisedButton from 'material-ui/RaisedButton';
import CircularProgress from 'material-ui/CircularProgress';

import DICTIONARY_LANGS from './../../constants/dictionaryLangs';
import injectF from './../../helpers/injectF';
import ipc from './../../helpers/ipc';
import injectPush from './../../helpers/injectPush';
import {addFolderByCsv} from './../../redux/modules/folder';
import {openExternal} from './../../redux/modules/main';

const styles = require('./PageImportCsv.scss');
const dictionaryLangs = DICTIONARY_LANGS.map((row) => row.value);
const langExpression = '{lang}';
const supportedColumns = [
  {textId: 'source-entry', expression: 'source-entry-{lang}'},
  {textId: 'explaination', expression: 'explaination-{lang}'},
  {textId: 'explaination-note', expression: 'explaination-note-{lang}'},
  {textId: 'page-num', expression: 'page-num'},
];

const csvExampleUrl = 'https://goo.gl/YcRMrT';

@connect(({folder}) => ({
  isProcessingCsv: folder.get('isProcessingCsv'),
  errorMessage: folder.get('errorCsvMessage'),
  errorMessageId: folder.get('errorCsvMessageId'),
  errorFilename: folder.get('errorCsvFilename')
}), {addFolderByCsv, openExternal})
@injectIntl
@injectPush
@injectF
export default class PageImportCsv extends Component {

  static propTypes = {
    f: PropTypes.func.isRequired,
    fh: PropTypes.func.isRequired,
    push: PropTypes.func.isRequired,
    isProcessingCsv: PropTypes.bool.isRequired,
    errorMessage: PropTypes.string,
    errorMessageId: PropTypes.string,
    errorFilename: PropTypes.string,
    openExternal: PropTypes.func.isRequired,
    addFolderByCsv: PropTypes.func.isRequired
  };

  constructor(props) {
    super(props);
    this.state = {
      completedLines: 0
    };
  }

  handleCsvProcessingStatus = (event, data) => {
    this.setState({completedLines: data.completedLines});
  };

  componentWillMount() {
    ipc.on('csv-processing-status', this.handleCsvProcessingStatus);
  }

  componentWillUnmount() {
    ipc.off('csv-processing-status', this.handleCsvProcessingStatus);
  }

  handleExternalLinkButtonTouchTap = () => {
    this.props.openExternal(csvExampleUrl);
  };

  handleChooseCsvFileButtonTouchTap = () => {
    this.props.addFolderByCsv();
  }

  renderChooseCsvFileButton = () => {

    const {completedLines} = this.state;
    const {f, isProcessingCsv} = this.props;

    if (isProcessingCsv) {
      return (
        <div className={styles.chooseFileBtnWrap}>
          {(completedLines > 0) && <div className={styles.linesCompleted}>{f('completed-csv-line', {completedLines: `${completedLines}`})}</div>}
          <CircularProgress />
        </div>
      );
    }
    return (
      <div className={styles.chooseFileBtnWrap}>
        <RaisedButton label={f('choose-csv-file')} primary onTouchTap={this.handleChooseCsvFileButtonTouchTap} />
      </div>
    );
  };

  render() {

    const {f, fh, errorMessage, errorMessageId, errorFilename} = this.props;
    const supportedLangs = dictionaryLangs.map((lang) => `${f(lang)} ${lang}`)
      .join(', ');

    const supportedColumnNames = supportedColumns.map(({textId, expression}) => `${f(textId)} ${expression}`)
      .join(', ');

    const externalLinkButton = <a onTouchTap={this.handleExternalLinkButtonTouchTap}>{csvExampleUrl}</a>;

    return (
      <div className={styles.pageImportCsv}>
        <div className={styles.content}>
          <h1>{f('import-csv-file')}</h1>
          <ul>
            <li>{fh('import-csv-rule-1', {supportedLangs, langExpression})}</li>
            <li>{fh('import-csv-rule-2', {langExpression})}</li>
            <li>{fh('import-csv-rule-3', {supportedColumnNames})}</li>
            <li>{fh('import-csv-rule-4')} {externalLinkButton}</li>
          </ul>
          {errorMessage && <div className={styles.errorMessage}>{errorMessage}</div>}
          {errorMessageId && errorFilename && <div className={styles.errorMessage}>{f(errorMessageId, {errorFilename})}</div>}
          {this.renderChooseCsvFileButton()}
        </div>
      </div>
    );
  }
}

@@ -512,21 +512,16 @@
 ort 
-%7Bopen
 External
 %7D fr
@@ -516,17 +516,20 @@
 External
-%7D
+Link
  from '.
@@ -536,29 +536,33 @@
 /../
-../redux/modules/ma
+ExternalLink/ExternalL
 in
+k
 ';%0A%0A
@@ -1279,22 +1279,8 @@
 yCsv
-, openExternal
 %7D)%0A@
@@ -1659,53 +1659,8 @@
 ng,%0A
-    openExternal: PropTypes.func.isRequired,%0A
     
@@ -2121,103 +2121,8 @@
  %7D%0A%0A
-  handleExternalLinkButtonTouchTap = () =%3E %7B%0A    this.props.openExternal(csvExampleUrl);%0A  %7D;%0A%0A
   ha
@@ -3185,59 +3185,40 @@
  = %3C
-a onTouchTap=%7Bthis.handleExternalLinkButtonTouchTap
+ExternalLink href=%7BcsvExampleUrl
 %7D%3E%7Bc
@@ -3232,17 +3232,28 @@
 leUrl%7D%3C/
-a
+ExternalLink
 %3E;%0A%0A    

use container ExternalLink