//React
import * as React from 'react';
import * as ReactDOM from 'react-dom';
//Wijmo
import * as wjcCore from 'wijmo/wijmo';
//Application
import { DataSvc } from '../services/DataSvc';

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

    fieldNames = DataSvc.default.getNames();
    cvPaging= new wjcCore.CollectionView(DataSvc.default.getData(55));

    constructor(props) {
        super(props);
         this.cvPaging.pageSize = 10;
         this.state = {
            pageSize:this.cvPaging.pageSize
        }
    }

    moveToFirstPage(){
        this.cvPaging.moveToFirstPage();
        this.forceUpdate();
    }

    moveToPreviousPage(){
        this.cvPaging.moveToPreviousPage();
        this.forceUpdate();
    }

    moveToNextPage(){
        this.cvPaging.moveToNextPage();
        this.forceUpdate();
    }

    moveToLastPage(){
        this.cvPaging.moveToLastPage();
        this.forceUpdate();
    }

    pageSizeChanged(event){
     let pageSize = event.target.value;
      if (!pageSize) {
            pageSize = 0;
        } else {
            pageSize = wjcCore.Globalize.parseInt(pageSize);
        }
        this.setState({ pageSize: pageSize });
        this.cvPaging.pageSize = pageSize;
        this.forceUpdate();
    }

    render() {
        return <div>
              <h2>Paging</h2>
              <p>
                  The CollectionView class, like the one in .NET, implements 
                  the <b>IPagedCollectionView</b> interface to support paging.
                  To enable paging, set the <b>IPagedCollectionView.pageSize</b> property
                   to the number of items you want on each page, and provide a UI
                  for navigating the pages.
              </p>
              <p>
                  In this example, the CollectionView object is initialized to show 10 items
                  per page. You can customize it in the text box. We add navigation buttons, and
                  call IPagedCollectionView methods in the button click event. Note that we use 
                  the <strong>pageIndex</strong> and <strong>pageCount</strong> properties to show
                  the current page and total number of pages. You can customize the page size in
                  the first text box. Leave it empty or set it to 0 to disable paging and hide
                  the navigation buttons.
              </p>
            <div className="row">
                <div className="col-md-6">
                    <ul className="nav nav-tabs" role="tablist">
                        <li className="active"><a href="#pgJsx" role="tab" data-toggle="tab">JSX</a></li>
                        <li><a href="#pgJs" role="tab" data-toggle="tab">TS</a></li>
                    </ul>
                    <div className="tab-content">
                        <div className="tab-pane active pane-content" id="pgJsx">
                                {'<div className="row-fluid well row">\n'}
                                {'    <div className="col-md-5">\n'}
                                {'        <input type="text" className="form-control" placeholder="0 or empty is for no paging." \n'}
                                {'           value={this.state.pageSize} onChange={this.pageSizeChanged.bind(this)} />\n'}
                                {'    </div>\n'}
                                {'   <div className="btn-group col-md-7">\n'}
                                {'       <button type="button" className="btn btn-default"\n'}
                                {'               disabled={this.cvPaging.pageIndex <= 0}\n'}
                                {'               onClick={this.moveToFirstPage.bind(this)}>\n'}
                                {'           <span className="glyphicon glyphicon-fast-backward"></span>\n'}
                                {'       </button>\n'}
                                {'       <button type="button" className="btn btn-default"\n'}
                                {'       disabled={this.cvPaging.pageIndex <= 0}\n'}
                                {'       onClick={this.moveToPreviousPage.bind(this)}>\n'}
                                {'           <span className="glyphicon glyphicon-step-backward"></span>\n'}
                                {'       </button>\n'}
                                {'       <button type="button" className="btn btn-default" disabled style={{width:"100px"}}>\n'}
                                {'           {this.cvPaging.pageIndex + 1}\n'}
                                {'           / {this.cvPaging.pageCount}\n'}
                                {'       </button>\n'}
                                {'       <button type="button" className="btn btn-default"\n'}
                                {'       disabled={this.cvPaging.pageIndex >= this.cvPaging.pageCount - 1}\n'}
                                {'       onClick={this.moveToNextPage.bind(this)}>\n'}
                                {'           <span className="glyphicon glyphicon-step-forward"></span>\n'}
                                {'       </button>\n'}
                                {'       <button type="button" className="btn btn-default"\n'}
                                {'       disabled={this.cvPaging.pageIndex >= this.cvPaging.pageCount - 1}\n'}
                                {'       onClick={this.moveToLastPage.bind(this)}>\n'}
                                {'           <span className="glyphicon glyphicon-fast-forward"></span>\n'}
                                {'       </button>\n'}
                                {'   </div>\n'}
                                {'</div>\n'}
                                {'<div className="sGrid">\n'}
                                {'     <table className="table table-condensed table-bordered">\n'}
                                {'         <thead>\n'}
                                {'             <tr className="active">\n'}
                                {'                 {this.fieldNames.map((fieldName, index) => {\n'}
                                {'                     return <th key={index} className="text-center" >\n'}
                                {'                         {fieldName}\n'}
                                {'                     </th>\n'}
                                {'                 })}\n'}
                                {'             </tr>\n'}
                                {'         </thead>\n'}
                                {'         <tbody>\n'}
                                {'             {this.cvPaging.items.map((item, idx1) => {\n'}
                                {'                 return <tr key={idx1}>\n'}
                                {'                     {this.fieldNames.map((fieldName, idx2) => {\n'}
                                {'                         let itm = wjcCore.Globalize.format(item[fieldName], \'\');\n'}
                                {'                         return <td key={idx2} className="text-center" >\n'}
                                {'                             {itm}\n'}
                                {'                         </td>\n'}
                                {'                     })}\n'}
                                {'                 </tr>\n'}
                                {'             })}\n'}
                                {'         </tbody>\n'}
                                {'     </table>\n'}
                                {'  </div >  \n'}
                                {'</div >\n'}
                        </div>
                        <div className="tab-pane pane-content" id="pgJs">
                              {'  fieldNames = DataSvc.default.getNames();\n'}
                              {'  cvPaging= new wjcCore.CollectionView(DataSvc.default.getData(55));\n'}
                              {'\n'}
                              {'  constructor(props) {\n'}
                              {'      super(props);\n'}
                              {'       this.cvPaging.pageSize = 10;\n'}
                              {'       this.state = {\n'}
                              {'          pageSize:this.cvPaging.pageSize\n'}
                              {'      }\n'}
                              {'  }\n'}
                              {'\n'}
                              {'  moveToFirstPage(){\n'}
                              {'      this.cvPaging.moveToFirstPage();\n'}
                              {'      this.forceUpdate();\n'}
                              {'  }\n'}
                              {'\n'}
                              {'  moveToPreviousPage(){\n'}
                              {'      this.cvPaging.moveToPreviousPage();\n'}
                              {'      this.forceUpdate();\n'}
                              {'  }\n'}
                              {'\n'}
                              {'  moveToNextPage(){\n'}
                              {'      this.cvPaging.moveToNextPage();\n'}
                              {'      this.forceUpdate();\n'}
                              {'  }\n'}
                              {'\n'}
                              {'  moveToLastPage(){\n'}
                              {'      this.cvPaging.moveToLastPage();\n'}
                              {'      this.forceUpdate();\n'}
                              {'  }\n'}
                              {'\n'}
                              {'  pageSizeChanged(event){\n'}
                              {'   let pageSize = event.target.value;\n'}
                              {'    if (!pageSize) {\n'}
                              {'          pageSize = 0;\n'}
                              {'      } else {\n'}
                              {'          pageSize = wjcCore.Globalize.parseInt(pageSize);\n'}
                              {'      }\n'}
                              {'      this.setState({ pageSize: pageSize });\n'}
                              {'      this.cvPaging.pageSize = pageSize;\n'}
                              {'      this.forceUpdate();\n'}
                              {'  }\n'}
                        </div>
                    </div>
                </div>
                <div className="col-md-6">
                    <h4>Result (live):</h4>
                    
                         <div className="row-fluid well row">
                             <div className="col-md-5">
                                 <input type="text" className="form-control" placeholder="0 or empty is for no paging." 
                                    value={this.state.pageSize} onChange={this.pageSizeChanged.bind(this)} />
                             </div>
                            <div className="btn-group col-md-7">
                                <button type="button" className="btn btn-default"
                                        disabled={this.cvPaging.pageIndex <= 0}
                                        onClick={this.moveToFirstPage.bind(this)}>
                                    <span className="glyphicon glyphicon-fast-backward"></span>
                                </button>
                                <button type="button" className="btn btn-default"
                                disabled={this.cvPaging.pageIndex <= 0}
                                onClick={this.moveToPreviousPage.bind(this)}>
                                    <span className="glyphicon glyphicon-step-backward"></span>
                                </button>
                                <button type="button" className="btn btn-default" disabled style={{width:"100px"}}>
                                    {this.cvPaging.pageIndex + 1}
                                    / {this.cvPaging.pageCount}
                                </button>
                                <button type="button" className="btn btn-default"
                                disabled={this.cvPaging.pageIndex >= this.cvPaging.pageCount - 1}
                                onClick={this.moveToNextPage.bind(this)}>
                                    <span className="glyphicon glyphicon-step-forward"></span>
                                </button>
                                <button type="button" className="btn btn-default"
                                disabled={this.cvPaging.pageIndex >= this.cvPaging.pageCount - 1}
                                onClick={this.moveToLastPage.bind(this)}>
                                    <span className="glyphicon glyphicon-fast-forward"></span>
                                </button>
                            </div>
                         </div>
                         <div className="sGrid">
                              <table className="table table-condensed table-bordered">
                                  <thead>
                                      <tr className="active">
                                          {this.fieldNames.map((fieldName, index) => {
                                              return <th key={index} className="text-center" >
                                                  {fieldName}
                                              </th>
                                          })}
                                      </tr>
                                  </thead>
                                  <tbody>
                                      {this.cvPaging.items.map((item, idx1) => {
                                          return <tr key={idx1}>
                                              {this.fieldNames.map((fieldName, idx2) => {
                                                  let itm = wjcCore.Globalize.format(item[fieldName], '');
                                                  return <td key={idx2} className="text-center" >
                                                      {itm}
                                                  </td>
                                              })}
                                          </tr>
                                      })}
                                  </tbody>
                              </table>
                        </div >  
                    </div >
                </div >
         </div >;
    }
}

