'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

var _immutable = require('immutable');

var _immutable2 = _interopRequireDefault(_immutable);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _reactDom = require('react-dom');

var _draftJs = require('draft-js');

var _isSoftNewlineEvent = require('draft-js/lib/isSoftNewlineEvent');

var _isSoftNewlineEvent2 = _interopRequireDefault(_isSoftNewlineEvent);

var _reactJsonPretty = require('react-json-pretty');

var _reactJsonPretty2 = _interopRequireDefault(_reactJsonPretty);

var _RichTextEditor = require('./react-rte/src/RichTextEditor');

var _RichTextEditor2 = _interopRequireDefault(_RichTextEditor);

var _EditorValue = require('./react-rte/src/lib/EditorValue');

var _EditorValue2 = _interopRequireDefault(_EditorValue);

var _LinkDecorator = require('./react-rte/src/lib/LinkDecorator');

var _LinkDecorator2 = _interopRequireDefault(_LinkDecorator);

var _InaudibleDecorator = require('./react-rte/src/lib/InaudibleDecorator');

var _InaudibleDecorator2 = _interopRequireDefault(_InaudibleDecorator);

var _draftJsExportHtml = require('draft-js-export-html');

var _Media = require('./components/Media');

var _Media2 = _interopRequireDefault(_Media);

var _TopsBlock = require('./components/TopsBlock');

var _TopsBlock2 = _interopRequireDefault(_TopsBlock);

var _Tags = require('./components/Tags');

var _Tags2 = _interopRequireDefault(_Tags);

var _main = require('./style/main.css');

var _main2 = _interopRequireDefault(_main);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var HTMLDiff = require('./HTMLDiff');
var decorator = new _draftJs.CompositeDecorator([_LinkDecorator2.default, _InaudibleDecorator2.default]);

//import { RichTextEditor, decorator } from './react-rte/src/RichTextEditor';
var toolbarConfig = require('./react-rte/src/lib/EditorToolbarConfig');
//toolbarConfig.INLINE_STYLE_BUTTONS.unshift({label: 'Inaudible', style: 'inaudible'});
//
//


var extendedBlockRenderMap = _draftJs.DefaultDraftBlockRenderMap; //.merge(blockRenderMap);

var App = _react2.default.createClass({
    displayName: 'App',
    getInitialState: function getInitialState() {
        return {
            value: _EditorValue2.default.createEmpty(decorator),
            diff: ''
        };
    },
    componentWillMount: function componentWillMount() {
        var editorState = void 0;
        if (this.props.content && this.props.content !== null) {
            var contentState = (0, _draftJs.convertFromRaw)(this.props.content);
            editorState = _draftJs.EditorState.createWithContent(contentState, decorator);

            if (this.props.originalContent && this.props.originalContent !== null) {
                this.originalContent = (0, _draftJs.convertFromRaw)(this.props.originalContent);
            } else this.originalContent = editorState.getCurrentContent();
        } else {
            editorState = _draftJs.EditorState.createEmpty(decorator);
        }
        this.props.onChange && this.props.onChange(editorState);
    },
    onChange: function onChange(editorState) {
        if (!this.props.readOnly) this.addTimestamp(editorState);else this.props.onChange && this.props.onChange(editorState);
    },
    addTimestamp: function addTimestamp(editorState, replace) {
        var content = editorState.getCurrentContent();
        var selection = editorState.getSelection();

        var blockKey = selection.getStartKey();
        var block = content.getBlockForKey(blockKey);
        var now = this.props.currentTime || 0;
        var data = block.getData();
        if (replace || !data.get('timestamp') && data.get('timestamp') !== 0) {
            console.log('update');
            var newContentState = _draftJs.Modifier.mergeBlockData(content, selection, { timestamp: now });
            var newEditorState = _draftJs.EditorState.push(editorState, newContentState, 'change-block-data');
            var editorStateUpdate = _draftJs.EditorState.forceSelection(newEditorState, newContentState.getSelectionAfter());
            //value = RichTextEditor.EditorValue.createFromState(editorStateUpdate);
            this.props.onChange && this.props.onChange(editorStateUpdate);
        } else this.props.onChange && this.props.onChange(editorState);
    },
    setTimestamp: function setTimestamp() {
        this.addTimestamp(this.props.editorState, true);
    },
    createImmutableEntity: function createImmutableEntity(text, _Entity) {
        if (this.props.readOnly) return;
        var editorState = this.props.editorState;
        var content = editorState.getCurrentContent();
        var selection = editorState.getSelection();
        //@TODO: we need to only add extra space needs leading/trailing space
        var newContentState = _draftJs.Modifier.replaceText(content, selection, text, undefined, _Entity);
        var newEditorState = _draftJs.EditorState.push(editorState, newContentState, 'insert-fragment');
        var editorStateUpdate = _draftJs.EditorState.forceSelection(newEditorState, newContentState.getSelectionAfter());
        this.props.onChange && this.props.onChange(editorStateUpdate);
    },
    inaudible: function inaudible(event) {
        this.createImmutableEntity('[INAUDIBLE]', _draftJs.Entity.create('TOKEN', 'IMMUTABLE', { type: 'inaudible', timestamp: this.props.currentTime || 0 }));
    },
    crosstalk: function crosstalk(event) {
        this.createImmutableEntity('[CROSSTALK]', _draftJs.Entity.create('TOKEN', 'IMMUTABLE', { type: 'crosstalk', timestamp: this.props.currentTime || 0 }));
    },
    getRaw: function getRaw() {
        var raw = (0, _draftJs.convertToRaw)(this.props.editorState.getCurrentContent());
        return raw;
    },
    blockStyleFn: function blockStyleFn(block) {
        return;
    },
    blockRendererFn: function blockRendererFn(block) {
        var type = block.getType();
        if (type === 'unstyled') {
            return {
                component: _TopsBlock2.default,
                editable: !this.props.readOnly,
                props: {
                    timestamp: block.getData().get('timestamp')
                }
            };
        }
        return '';
    },
    scribeKeyHandler: function scribeKeyHandler(event) {
        return this.props.scribeKeyHandler && this.props.scribeKeyHandler(event);
    },
    onAllClick: function onAllClick(event) {
        // Handle clicking on the tags
        if (event.entity && this.props.setCurrentTime) {
            this.props.setCurrentTime(event.entity.timestamp);
        } else return;
    },
    componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
        if (nextProps.trackChanges && nextProps.editorState !== null) {
            var currentContentObj = nextProps.editorState.getCurrentContent();
            if (_immutable2.default.is(currentContentObj, this.originalContent)) return;
            var originalContent = (0, _draftJsExportHtml.stateToHTML)(this.originalContent);
            var rawCurrentContent = (0, _draftJs.convertToRaw)(currentContentObj);
            var currentContent = (0, _draftJsExportHtml.stateToHTML)(currentContentObj);
            var diff = HTMLDiff(originalContent, currentContent);
            var tagCheck = /\[INAUDIBLE\]|\[CROSSTALK\]/g;
            var tags = [];
            Object.keys(rawCurrentContent.entityMap).forEach(function (key, index) {
                var entity = rawCurrentContent.entityMap[key];
                if (!entity.data.type) return;
                var value = entity.data.type.toUpperCase();
                var className = _main2.default[entity.data.type];
                var element = '<span class="' + className + '" data-timestamp="' + entity.data.timestamp + '">' + value + '</span>';
                tags.push(element);
            });
            var iter = 0;
            var delCheck = /\bdel\b/;
            var newdiff = diff.replace(tagCheck, function (match, index, source) {
                if (delCheck.test(source.substr(index - 5, 5))) return match;
                var element = tags[iter];
                iter++;
                return element;
            });
            this.setState({ diff: newdiff });
        }
    },
    render: function render() {
        var rte = null;
        var edit = null;
        if (this.props.editorState && this.props.editorState !== null) {
            rte = _react2.default.createElement(_RichTextEditor2.default, {
                toolbarConfig: toolbarConfig,
                currentTime: this.props.currentTime,
                editorState: this.props.editorState,
                placeholder: this.props.placeholder,
                scribeKeys: this.props.scribeKeys,
                scribeKeyHandler: this.scribeKeyHandler,
                blockStyleFn: this.blockStyleFn,
                blockRendererFn: this.blockRendererFn,
                blockRenderMap: extendedBlockRenderMap,
                readOnly: this.props.readOnly || false,
                spellCheck: this.props.spellCheck || false,
                setTimestamp: this.setTimestamp,
                onChange: this.onChange });
            if (this.props.trackChanges && this.state.diff !== '') {
                edit = _react2.default.createElement(
                    'div',
                    { className: _main2.default['editor-split'] },
                    rte,
                    _react2.default.createElement('div', { className: _main2.default['editor-diff-view'],
                        ref: 'diff',
                        dangerouslySetInnerHTML: { __html: this.state.diff }
                    })
                );
            } else edit = rte;
        }

        return _react2.default.createElement(
            'div',
            { onClick: this.onAllClick },
            _react2.default.createElement(_Tags2.default, { inaudible: this.inaudible,
                crosstalk: this.crosstalk,
                setTimestamp: this.setTimestamp,
                editorState: this.props.editorState
            }),
            edit
        );
    }
});

exports.default = App;