import React from 'react';
import { Field, reduxForm } from 'redux-form';

export class EditWindow extends React.Component {
    render() {
        const me = this;
        const {
            is_playing, selected_words: selw, audio, playback_on, playback_off,
            handleSubmit,
        } = me.props;
        let cls = 'edit-window';
        if (selw.length > 0) {
            cls += ' is-shown';
        }
        return (
            <div className={cls}>
                <Field
                    component='textarea'
                    name='edited_subtitles'
                />
                {
                    is_playing
                    ? (
                        <button
                            className='glyphicon glyphicon-stop'
                            onClick={() => playback_off(audio)}
                            title='zastavit'
                        />
                    )
                    : (
                        <button
                            className='glyphicon glyphicon-play'
                            onClick={() => playback_on(audio)}
                            title='přehrát'
                        />
                    )
                }
                <button
                    className='glyphicon glyphicon-ok'
                    onClick={handleSubmit}
                    title='odeslat'
                />
            </div>
        );
    }

    componentWillReceiveProps(nextProps) {
        const me = this;
        const ps = me.props .selected_words;
        const ns = nextProps.selected_words;
        if ( !(ps && ps.length) && !(ns && ns.length) ) {
            return;
        }
        if (!ps
            || ps.length !== ns.length
            || ps[0] && !ns[0]
            || ps[0].timestamp !== ns[0].timestamp
            || ps[ps.length - 1].timestamp !== ns[ns.length - 1].timestamp
        ) {
            const selw_str = ns.map((w) => w.occurrence).join(' ');
            if (selw_str) {
                me.props.autofill('edited_subtitles', selw_str);
            }
        }
    }
};

EditWindow.propTypes = {
    is_playing:     React.PropTypes.bool,
    selected_words: React.PropTypes.array,
    audio:          React.PropTypes.object,
    playback_on:    React.PropTypes.func,
    playback_off:   React.PropTypes.func,
    handleSubmit:   React.PropTypes.func,
    autofill:       React.PropTypes.func,
};

/* eslint no-class-assign: [0] */
EditWindow = reduxForm({
    form: 'edit_window',
})(EditWindow);

export default EditWindow;

@@ -114,24 +114,152 @@
 Component %7B%0A
+    _is_shown() %7B%0A        const me = this;%0A        const selw = me.props.selected_words;%0A        return selw.length %3E 0;%0A    %7D%0A%0A
     render()
@@ -329,30 +329,8 @@
 ing,
- selected_words: selw,
  aud
@@ -453,31 +453,30 @@
     if (
-selw.length %3E 0
+me._is_shown()
 ) %7B%0A    
@@ -2188,16 +2188,416 @@
  %7D%0A    %7D
+%0A%0A    componentDidMount() %7B%0A        const me = this;%0A        if (!window.KEY_SEND_SUBS_CTRL) window.KEY_SEND_SUBS_CTRL = document.addEventListener(%0A            'keyup', (evt) =%3E %7B%0A                if (evt.ctrlKey && evt.key === 'Enter') %7B%0A                    if (me._is_shown()) %7B%0A                        me.props.handleSubmit();%0A                    %7D%0A                %7D%0A            %7D,%0A        );%0A    %7D
 %0A%7D;%0A%0AEdi

send subs on ctrl enter