'use strict';
import React from 'react';
import App from './App';
import { convertToRaw, convertFromRaw } from 'draft-js';

import Media from './components/Media';

import demoRaw from './demoText';
import demoRaw2 from './demoText2';
import demoRaw3 from './demoText3';

const Unit = React.createClass({
    getInitialState() {
        return {
            trackChanges: false,
            content: demoRaw3,
            editorState: null,
            currentTime: 0,
            goToTime: 0,
            scribeKeys: {
                '113': 'slow',
                '114': 'fast',
                '115': 'stop',
                '118': 'rewind',
                '119': 'forward',
                '120': 'play',
                '121': 'normal'
            },
        }
    },
    scribeKeyHandler(event) {
        debugger
    },
    onChange(editorState) {
        const content = convertToRaw(editorState.getCurrentContent());
        this.setState({ content: content, editorState: editorState });
    },
    onTimeUpdate(event) {
        this.setState({currentTime: event.target.currentTime});
    },
    setCurrentTime(ts) {
        this.setState({goToTime: ts});
        return
    },
    onKeyUp(event) {
        debugger
    },
    trackChanges(event) {
        this.setState({trackChanges: !this.state.trackChanges});
    },
    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>
            <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}
                onKeyUp={this.onKeyUp}
                onChange={this.onChange} />
            </div>
        );
    }
});

export default Unit;