import * as React from 'react';
// import {
//     DetailsList,
//     DetailsListLayoutMode,
//     Selection,
//     IColumn,
//     SelectionMode
// } from 'office-ui-fabric-react/lib/DetailsList';
import ReactPaginate from 'react-paginate';

//import './ListView.css'

export class ListView extends React.Component<any, any> {
   // private _selection: Selection;
    //private _columns: IColumn[] = [];
    private _sortedColumnId: number = -1;
    private _isSortedDescending: boolean = false;
    private _currentPage = 1;
    private _totalPages = 1;
  //  private _pagination: any;

    constructor(props: any) {
        super(props);
        if (props.TotalPages)
            this._totalPages = props.TotalPages;

        if (this.props.defaultSorting && this.props.defaultSorting.fieldId) {
            this._sortedColumnId = this.props.defaultSorting.fieldId;
            this._isSortedDescending = this.props.defaultSorting.direction == 1 ? true : false;
        }
        // this._selection = new Selection({
        //     onSelectionChanged: () => {
        //         if (this.props.SelectedItemChanged)
        //             this.props.SelectedItemChanged(this._selection.getSelection()[0]);
        //     }
        // });
        this.state = {
            isModalSelection: this.props.selectionModeType,
            loadingData: false

        };
    }

    // private _onColumnClick = (ev: React.MouseEvent<HTMLElement>, column: IColumn): void => {

    //     this.setState({ loadingData: true })

    //     //let newItems: any[] = this.props.Items.slice();
    //     //const newColumns: IColumn[] = this._columns.slice();
    //     // const currColumn: IColumn = this._columns.filter((currCol: IColumn, idx: number) => {
    //     //     return column.key === currCol.key;
    //     // })[0];

    //     this._sortedColumnId = +column.key;
    //     //this._isSortedDescending = !currColumn.isSortedDescending;

    //     this._pagination.setState({ 'selected': 0 })
    //     this._currentPage = 0;

    //     if (this.props.LoadRecordsWithNewCriteria)
    //         this.props.LoadRecordsWithNewCriteria(column.key, this._isSortedDescending, this._currentPage);

    //     // newColumns.forEach((newCol: IColumn) => {
    //     //     if (newCol === currColumn) {
    //     //         currColumn.isSortedDescending = !currColumn.isSortedDescending;
    //     //         currColumn.isSorted = true;
    //     //     } else {
    //     //         newCol.isSorted = false;
    //     //         newCol.isSortedDescending = true;
    //     //     }
    //     // });
    //     // newItems = this._sortItems(newItems, currColumn.fieldName || '', currColumn.isSortedDescending);
    // };

    private _handlePageChange = (data: any): void => {

        this._currentPage = data.selected;

        if (this.props.LoadRecordsWithNewCriteria)
            this.props.LoadRecordsWithNewCriteria(this._sortedColumnId, this._isSortedDescending, this._currentPage);
    }

    public ClearSelection() {
        // if (this.props.ClearSelection && this._selection)
        //     this._selection.setAllSelected(false);
    }

    componentWillUpdate() {
        this.ClearSelection();
       // this._columns = [];

        // for (var i = 0; i < this.props.Columns.length; i++) {
        //     let column: IColumn = {
        //         key: this.props.Columns[i].id,
        //         name: this.props.Columns[i].name,
        //         fieldName: this.props.Columns[i].fieldName,
        //         minWidth: this.props.Columns[i].minWidth,
        //         maxWidth: this.props.Columns[i].maxWidth,
        //         isResizable: true,
        //         onColumnClick: this._onColumnClick.bind(this),
        //         isRowHeader: true,
        //         isSorted: this._sortedColumnId == this.props.Columns[i].id,
        //         isSortedDescending: this._isSortedDescending,
        //         data: this.props.Columns[i].dataType,
        //         isPadded: true
        //     }
        //     if (this.props.Columns[i].onRender instanceof Function) {
        //         column.onRender = this.props.Columns[i].onRender;
        //     }
        //     this._columns.push(column);
        // }
    }

    public render() {

        return (
            <div>

                {/* <DetailsList

                    items={this.props.Items}
                    columns={this._columns}
                    setKey="set"
                    selectionMode={this.state.isModalSelection ? SelectionMode.single : SelectionMode.none}
                    layoutMode={DetailsListLayoutMode.justified}
                    isHeaderVisible={true}
                    selection={this._selection}

                    selectionPreservedOnEmptyClick={true}
                    enterModalSelectionOnTouch={true}
                /> */}

                <ReactPaginate
                    previousLabel={'<'}
                    nextLabel={'>'}
                    breakLabel={'...'}
                    breakClassName={'break-me'}
                    pageCount={this._totalPages}
                    marginPagesDisplayed={1}
                    pageRangeDisplayed={4}
                    containerClassName={'office-fabric-pagination document-preview-pagination'}
                    onPageChange={this._handlePageChange.bind(this)}
                   // ref={(input) => this._pagination = input}
                    activeClassName={'active'}
                />

            </div>
        );
    }

    // private _sortItems = (items: any[], sortBy: string, descending = false): any[] => {
    //     if (descending) {
    //         return items.sort((a: any, b: any) => {
    //             if (a[sortBy] < b[sortBy]) {
    //                 return 1;
    //             }
    //             if (a[sortBy] > b[sortBy]) {
    //                 return -1;
    //             }
    //             return 0;
    //         });
    //     } else {
    //         return items.sort((a: any, b: any) => {
    //             if (a[sortBy] < b[sortBy]) {
    //                 return -1;
    //             }
    //             if (a[sortBy] > b[sortBy]) {
    //                 return 1;
    //             }
    //             return 0;
    //         });
    //     }
    // };
}


export default ListView;