'use strict';
import React from 'react';
import App from './App';
import _ from 'lodash';
import { convertToRaw, convertFromRaw } from 'draft-js';
import { hasCommandModifier } from 'draft-js/lib/KeyBindingUtil';

import Media from './components/Media';

import demoRaw from './demoText';
import demoRaw2 from './demoText2';
import demoRaw3 from './demoText3';
import demoRaw4 from './demoText4'; //super long, real transcript
import demoRaw5 from './demoText5';
import contentRaw from './content-test.json';

const Unit = React.createClass({
    getInitialState() {
        return {
            trackChanges: false,
            spellCheck: false,
            content: demoRaw4,
            editorState: null,
            currentTime: 0,
            goToTime: 0,
            scribeKeys: {
                play: {
                    key: 'F8',
                    keyCode: 119,
                    ctrlKey: false
                },
                stop: {
                    key: 'F4',
                    keyCode: 115,
                    ctrlKey: false
                },
                rwd: {
                    key: 'F7',
                    keyCode: 118,
                    ctrlKey: false
                },
                fwd: {
                    key: 'F9',
                    keyCode: 120,
                    ctrlKey: false
                },
                cross: {
                    key: 'c',
                    keyCode: 67,
                    ctrlKey: true
                },
                inaud: {
                    key: 'd',
                    keyCode: 84,
                    ctrlKey: true
                }
            },
        }
    },
    scribeKeyHandler(event) {
        const keyCode = event.keyCode;
        const ctrlKey = hasCommandModifier(event);
        let action = false;
        Object.keys(this.state.scribeKeys).forEach((KEY) => {
            const cmd = this.state.scribeKeys[KEY];
            if(cmd.keyCode !== keyCode) return;
            if(cmd.ctrlKey !== ctrlKey) return;
            action = KEY;
        });
        if(action === false) return;

        switch(action) {
            case 'play':
            case 'stop':
            case 'fwd':
            case 'rwd':
                try {
                    window['ff' + action]();
                } catch(err) {
                    //Eat it
                    console.log(err);
                }
                break;
            default:
                return action;
                break;
        }
        return;
    },
    onChange(editorState) {
        this.setState({editorState});
    },
    onTimeUpdate(event) {
        this.setState({currentTime: event.target.currentTime});
    },
    setCurrentTime(ts) {
        this.setState({goToTime: ts});
        return
    },
    trackChanges(event) {
        this.setState({trackChanges: !this.state.trackChanges});
    },
    toggleSpellCheck() {
        this.setState({spellCheck: !this.state.spellCheck}, () => {
            if(this.state.spellCheck && window.spellCheckHandler) {
                window.spellCheckHandler.attachToInput()
            } else if (!this.state.spellCheck && window.spellCheckHandler) {
                window.spellCheckHandler.unsubscribe();
                if(window.webFrame) {
                    window.webFrame
                        .setSpellCheckProvider(
                            spellCheckHandler.currentSpellcheckerLanguage,
                            false,
                            { spellCheck: function(){ return true; }}
                        );
                }
            }
        });
    },
    render() {
        return (
            <div>
            <Media onTimeUpdate={this.onTimeUpdate} goToTime={this.state.goToTime} />
            <label>
            <input type="checkbox"
                checked={this.state.trackChanges}
                onChange={this.trackChanges} />
                Track Changes
            </label>
            <label>
            <input type="checkbox"
                checked={this.state.spellCheck}
                onChange={this.toggleSpellCheck} />
                Spell Check
            </label>
            <App currentTime={this.state.currentTime}
                content={this.state.content}
                currentTime={this.state.currentTime}
                trackChanges={this.state.trackChanges}
                setCurrentTime={this.setCurrentTime}
                editorState={this.state.editorState}
                scribeKeys={this.state.scribeKeys}
                scribeKeyHandler={this.scribeKeyHandler}
                spellCheck={this.state.spellCheck}
                onChange={this.onChange} />
            </div>
        );
    }
});

export default Unit;