import React from 'react/addons';
import Reflux from 'reflux';

import util from '../utils/util.jsx';
import previewStore from './preview-store.jsx';

import _ from 'lodash';

export default React.createClass({
    mixins: [Reflux.connect(previewStore, 'store')],

    componentDidUpdate() {
        var store = this.state.store;
        this.refs.preview.getDOMNode()
            .contentDocument
            .location.replace(store.previewUrl);
    },

    render() {

        var store = this.state.store;

        var previewStyles = {
            //height: 'calc(42vh + 40px)',
            //height: 'calc(40px)',
        };

        var previewClassName = util.generateClassName({
            preview: 1,
            _pos: store.previewPositionClass,
        });

        /*
         @[  #wiki渲染器 todo  ]{ihk14kbo_pi5qjshq_h9ewg}@

         - [] 初版最简单的html + css
         - [] 动态切换
         - [] 嵌入iframe
         - [] 记得控制好页首与页尾的空白区域

         */
        return <div className={previewClassName}
                    style={previewStyles}
                    data-is-shown={store.isShown}
                    data-is-counting={store.isCounting}
            >
            <div className='controls'>
                <span className='timer'>{store.previewCountdown}</span>
                {
                    //<span className='action fa fa-close'></span>
                }
            </div>
            <div className='preview-content-wrapper'>
                <iframe ref="preview"></iframe>
            </div>
        </div>
    }
});