//React
import * as React from 'react';
import * as ReactDOM from 'react-dom';
//Application
import * as wjViewer from 'wijmo/wijmo.react.viewer';

export class GettingStarted extends React.Component<any, any> {

    constructor(props) {
        super(props);
        this.state = {
            pdfServiceUrl: 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/pdf',
            pdfFilePath: 'pdfroot/DefaultDocument.pdf'
        }
    }


    render() {
        return <div>
            <h2>Getting Started</h2>
            <p>
                Steps for getting started with the PdfViewer control in React applications:
        </p>
            <ol>
                <li>Set up C1 Web API Pdf Services.  Please refer to <a target="_blank" href="https://grapecity.sharepoint.com/teams/C1/C1Studio/Rhino/_layouts/15/WopiFrame.aspx?sourcedoc=%7B2A584525-1FE5-4DDF-9250-BFFBDCEF7ACD%7D&file=%5BHowTo%5DSet%20Up%20C1%20Web%20Api%20Pdf%20Services.docx&action=default&IsList=1&ListId=%7BDFFA5B8D-3C57-433C-B25F-A31FAB3602EF%7D&ListItemId=644">How to set up C1 Web API Pdf Services</a>.</li>
                <li>Add a PdfViewer React component to the page and set its <b>serviceUrl</b> and <b>filePath</b> properties.</li>
            </ol>
            <p>
                The <a target="_blank" href="http://helpcentral.componentone.com/nethelp/C1WebAPI/ReportServices.html">C1 Web API Pdf Services</a> uses <a target="_blank" href="http://helpcentral.componentone.com/nethelp/FlexReport/C1.Win.C1Document.4~C1.Win.C1Document.C1PdfDocumentSource.html">C1PdfDocumentSource</a> to render and export pdf files.
            Please refer to <a target="_blank" href="https://grapecity.sharepoint.com/teams/C1/C1Studio/Rhino/_layouts/15/WopiFrame.aspx?sourcedoc=%7B2A584525-1FE5-4DDF-9250-BFFBDCEF7ACD%7D&file=%5BHowTo%5DSet%20Up%20C1%20Web%20Api%20Pdf%20Services.docx&action=default&IsList=1&ListId=%7BDFFA5B8D-3C57-433C-B25F-A31FAB3602EF%7D&ListItemId=644">How to set up C1 Web API Pdf Services</a> for details.
        </p>
            <p>
                To show the pdf file from C1 Web API Pdf Services, set the following basic properties:
        </p>
            <ol>
                <li>
                    <b>serviceUrl:</b> The url of C1 Web API Pdf Services.
                For example, 'http://demos.componentone.com/aspnet/webapi/api'.
            </li>
                <li>
                    <b>filePath:</b> The full path to the pdf file.
                For example, 'PdfRoot/C1XapOptimizer.pdf'.
                <p>
                        The 'PdfRoot' is the key of the pdf file disk storage provider which is registered at server for locating specified pdf file.
                    <br />
                        The 'C1XapOptimizer.pdf' is the relative path of the pdf file which can be located by the disk storage provider.
                </p>
                </li>
            </ol>
            <div className="row">
                <div className="col-md-12">
                    <h4>Result (live):</h4>
                    <wjViewer.PdfViewer
                        serviceUrl={this.state.pdfServiceUrl}
                        filePath={this.state.pdfFilePath} />
                </div>
            </div>
            <br /><br />
            <div className="row">
                <div className="col-md-12">
                    <ul className="nav nav-tabs" role="tablist">
                        <li className="active"><a href="#gsJsx" role="tab" data-toggle="tab">JSX</a></li>
                        <li><a href="#gsJs" role="tab" data-toggle="tab">TS</a></li>
                     </ul>
                    <div className="tab-content">
                        <div className="tab-pane active pane-content" id="gsJsx">
                            {' <wjViewer.PdfViewer\n'}
                            {'     serviceUrl={this.state.pdfServiceUrl}\n'}
                            {'     filePath={this.state.pdfFilePath} />\n'}
                        </div>
                        <div className="tab-pane pane-content" id="gsJs">
                            {' 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'}
                            {'     }\n'}
                            {' }\n'}
                        </div>
                        </div>
                </div>
            </div>
        </div>;
    }
}

