//React
import * as React from 'react';
import * as ReactDOM from 'react-dom';
//wijmo
import * as wjcViewer from 'wijmo/wijmo.viewer';
import * as wjcInput from 'wijmo/wijmo.input';
import * as wjInput from 'wijmo/wijmo.react.input';
import * as wjViewer from 'wijmo/wijmo.react.viewer';

export class BasicFeatures extends React.Component<any, any> {
    pdfViewer: wjcViewer.PdfViewer;
    mouseModes = ['SelectTool', 'MoveTool', 'RubberbandTool', 'MagnifierTool'];
    constructor(props) {
        super(props);
        this.state = {
            pdfServiceUrl: 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/pdf',
            pdfFilePath: 'pdfroot/DefaultDocument.pdf',
            fullScreen: false,
            mouseMode: 'SelectTool',
            zoomFactor: 1
        }
    }

    initialized(s) {
        this.pdfViewer = s;
    }

    stateChanged(event) {
        var target = event.target,
            value = target.type === 'checkbox' ? target.checked : target.value,
            name = target.name;

        this.setState({
            [name]: value
        });

        if (name == 'continuousViewMode') {
            this.pdfViewer.viewMode = value ? wjcViewer.ViewMode.Continuous : wjcViewer.ViewMode.Single;
        }
    }

    mouseModeChanged(menu: wjcInput.Menu) {
        var mouseMode = menu.selectedValue;
        this.setState({ mouseMode: mouseMode });
    }

    zoomFactorChanged(s) {
        this.setState({
            zoomFactor: s.value
        });
    }

    fullScreenChanged() {
        this.setState({
            fullScreen: this.pdfViewer.fullScreen
        });
    }

    render() {
        return <div>
            <h2 id="Legend">Basic Features</h2>
            <p>
                The PdfViewer control has four basic properties that allow you to customize its appearance and behavior:
        </p>
            <ul>
                <li>
                    <b>fullScreen</b>:  Indicates whether viewer is under full screen mode.
            </li>
                <li>
                    <b>mouseMode</b>:  Indicates whether clicking and dragging with the mouse in the view panel selects text.
            </li>
                <li>
                    <b>viewMode</b>:  Indicates how to show the document pages.
            </li>
                <li>
                    <b>zoomFactor</b>:  Indicates the current zoom factor to show the document pages.
            </li>
            </ul>
            <p>
                The example below allows you to see what happens when you change these properties.
        </p>
            <div className="row">
                <div className="col-md-12">
                    <h4>Result (live):</h4>
                    <div className="row">
                        <wjViewer.PdfViewer
                            initialized={this.initialized.bind(this)}
                            serviceUrl={this.state.pdfServiceUrl}
                            filePath={this.state.pdfFilePath}
                            fullScreen={this.state.fullScreen}
                            mouseMode={this.state.mouseMode}
                            zoomFactor={this.state.zoomFactor}
                            fullScreenChanged={this.fullScreenChanged.bind(this)} />
                    </div>
                    <br />
                    <div className="row">
                        <div className="form-horizontal">
                            <div className="form-group">
                                <div className="col-md-3">
                                    <div className="checkbox">
                                        <label>
                                            <input name="continuousViewMode" type="checkbox" checked={this.state.continuousViewMode}
                                                onChange={this.stateChanged.bind(this)} /> Continuous View Mode?
                                    </label>
                                    </div>
                                </div>
                                <div className="col-md-3">
     
                                        <wjInput.Menu
                                            header={"Mouse Mode:  " + "<b>" + this.state.mouseMode + "</b>"}
                                            itemsSource={this.mouseModes}
                                            itemClicked={this.mouseModeChanged.bind(this)} />

                                </div>
                                <div className="col-md-2">
                                    <div className="checkbox">
                                        <label>
                                            <input name="fullScreen" type="checkbox" checked={this.state.fullScreen}
                                                onChange={this.stateChanged.bind(this)} /> Full Screen?
                                    </label>
                                    </div>
                                </div>
                                <div className="col-mod-4">
                                    <label className="col-md-2 control-label">Zoom Factor</label>
                                    <div className="col-md-2">
                                        <wjInput.InputNumber
                                            value={this.state.zoomFactor}
                                            min={0.05}
                                            max={10}
                                            step={.1}
                                            format={'n2'}
                                            valueChanged={this.zoomFactorChanged.bind(this)}>
                                        </wjInput.InputNumber>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br /><br />
            <div className="row">
                <div className="col-md-12">
                    <ul className="nav nav-tabs" role="tablist">
                        <li className="active"><a href="#bfJsx" role="tab" data-toggle="tab">JSX</a></li>
                        <li><a href="#bfJs" role="tab" data-toggle="tab">TS</a></li>
                    </ul>
                    <div className="tab-content">
                        <div className="tab-pane active pane-content" id="bfJsx">
                            {'    <wjViewer.PdfViewer\n'}
                            {'        initialized={this.initialized.bind(this)}\n'}
                            {'        serviceUrl={this.state.pdfServiceUrl}\n'}
                            {'        filePath={this.state.pdfFilePath}\n'}
                            {'        fullScreen={this.state.fullScreen}\n'}
                            {'        mouseMode={this.state.mouseMode}\n'}
                            {'        zoomFactor={this.state.zoomFactor}\n'}
                            {'        fullScreenChanged={this.fullScreenChanged.bind(this)}/>\n'}
                            {'</div>\n'}
                            {'<br />\n'}
                            {'<br />\n'}
                            {' <br />\n'}
                            {'<div className="row">\n'}
                            {'    <div className="form-horizontal">\n'}
                            {'        <div className="form-group">\n'}
                            {'            <div className="col-md-3">\n'}
                            {'                <div className="checkbox">\n'}
                            {'                    <label>\n'}
                            {'                        <input name="continuousViewMode" type="checkbox" checked={this.state.continuousViewMode}\n'}
                            {'                            onChange={this.stateChanged.bind(this)}/> Continuous View Mode?\n'}
                            {'                    </label>\n'}
                            {'                </div>\n'}
                            {'            </div>\n'}
                            {'            <div className="col-md-3">\n'}
                            {'                <wjInput.Menu\n'}
                            {'                    header={"Mouse Mode:  " + "<b>" + this.state.mouseMode + "</b>"}\n'}
                            {'                    itemsSource={this.mouseModes}\n'}
                            {'                    itemClicked={this.mouseModeChanged.bind(this)} />\n'}
                            {'            </div>\n'}
                            {'            <div className="col-md-2">\n'}
                            {'                <div className="checkbox">\n'}
                            {'                    <label>\n'}
                            {'                        <input name="fullScreen" type="checkbox" checked={this.state.fullScreen}\n'}
                            {'                            onChange={this.stateChanged.bind(this)} /> Full Screen?\n'}
                            {'                    </label>\n'}
                            {'                </div>\n'}
                            {'            </div>\n'}
                            {'            <div className="col-mod-4">\n'}
                            {'                <label className="col-md-2 control-label">Zoom Factor</label>\n'}
                            {'                <div className="col-md-2">\n'}
                            {'                    <wjInput.InputNumber \n'}
                            {'                        value={this.state.zoomFactor}\n'}
                            {'                        min={0.05}\n'}
                            {'                        max={10}\n'}
                            {'                        step={.1}\n'}
                            {'                        format={\'n2\'}\n'}
                            {'                        valueChanged={this.zoomFactorChanged.bind(this)}>\n'}
                            {'                    </wjInput.InputNumber>\n'}
                            {'            </div>\n'}
                            {'        </div>\n'}
                            {'    </div>\n'}
                            {'</div>\n'}
                        </div>
                        <div className="tab-pane pane-content" id="bfJs">
                            {'   pdfViewer: wjcViewer.PdfViewer;\n'}
                            {'   mouseModes = [\'SelectTool\', \'MoveTool\', \'RubberbandTool\', \'MagnifierTool\'];\n'}
                            {'\n'}
                            {'   constructor(props) {\n'}
                            {'       super(props);\n'}
                            {'       this.state = {\n'}
                            {'           pdfServiceUrl: \'http://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/pdf\',\n'}
                            {'           pdfFilePath: \'pdfroot/DefaultDocument.pdf\',\n'}
                            {'           fullScreen: false,\n'}
                            {'           mouseMode: \'SelectTool\',\n'}
                            {'           zoomFactor:1\n'}
                            {'       }\n'}
                            {'   }\n'}
                            {'\n'}
                            {'   initialized(s) {\n'}
                            {'       this.pdfViewer = s;\n'}
                            {'   }\n'}
                            {'\n'}
                            {'   stateChanged(event) {\n'}
                            {'       var target = event.target,\n'}
                            {'           value = target.type === \'checkbox\' ? target.checked : target.value,\n'}
                            {'           name = target.name;\n'}
                            {'\n'}
                            {'       this.setState({\n'}
                            {'           [name]: value\n'}
                            {'       });\n'}
                            {'\n'}
                            {'       if (name == \'continuousViewMode\') {\n'}
                            {'           this.pdfViewer.viewMode = value ? wjcViewer.ViewMode.Continuous : wjcViewer.ViewMode.Single;\n'}
                            {'       }\n'}
                            {'   }\n'}
                            {'\n'}
                            {'   mouseModeChanged(menu: wjcInput.Menu) {\n'}
                            {'       var mouseMode = menu.selectedValue;\n'}
                            {'        this.setState({mouseMode: mouseMode });\n'}
                            {'   }\n'}
                            {'   zoomFactorChanged(s) {\n'}
                            {'       this.setState({\n'}
                            {'           zoomFactor: s.value\n'}
                            {'       });\n'}
                            {'   }\n'}
                            {'\n'}
                            {'   fullScreenChanged() {\n'}
                            {'       this.setState({\n'}
                            {'           fullScreen: this.pdfViewer.fullScreen\n'}
                            {'       });\n'}
                            {'   }\n'}
                        </div>
                    </div>
                </div>
            </div>
        </div>;
    }
}

