import * as React from 'react';
import {
    DetailsList,
    DetailsListLayoutMode,
    Selection,
    IColumn
} from 'office-ui-fabric-react/lib/DetailsList';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
import { TableRow,TableColumn } from '../Models/';


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

    public Items: TableRow[] = [];

    private _selection: Selection;

    constructor(props: any) {
        super(props);
        this.state = {
            items: this.Items,
            columns:  this._columns.map((item:TableColumn):IColumn=>
            {
                let col:IColumn = {key:item.key,name:item.name,minWidth:50};

                return col;
            })
        };       
    }

    private _onColumnClick = (ev: React.MouseEvent<HTMLElement>, column: IColumn): void => {
        const { columns, items } = this.state;
        let newItems: TableRow[] = items.slice();
        const newColumns: IColumn[] = columns.slice();
        const currColumn: IColumn = newColumns.filter((currCol: IColumn, idx: number) => {
            return column.key === currCol.key;
        })[0];
        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);
        this.setState({
            columns: newColumns,
            items: newItems
        });
    };


    private _columns: IColumn[] = [];

    public render() {
        const { columns, items } = this.state;

        return (
            <div>
                <MarqueeSelection selection={this._selection}>
                    <DetailsList
                        items={items}
                        columns={columns}
                        setKey="set"
                        layoutMode={DetailsListLayoutMode.justified}
                        isHeaderVisible={true}
                        selection={this._selection}
                        selectionPreservedOnEmptyClick={true}
                        enterModalSelectionOnTouch={true}
                    />
                </MarqueeSelection>
            </div>
        );
    }

    componentDidMount() {
            this._columns.push({
                key:"fileType",
                name: "File Type",
                fieldName: "name",
                minWidth: 210,
                maxWidth: 350,
                isRowHeader: true,
                isResizable: true,
                isSorted: true,
                isSortedDescending: false,
                onColumnClick: this._onColumnClick,
                data: 'string',
                isPadded: true
            });
            this._columns.push({
                key: "dateModified",
                name: "Date Modified",
                fieldName: "dateModified",
                minWidth: 210,
                maxWidth: 350,
                isRowHeader: true,
                isResizable: true,
                isSorted: true,
                isSortedDescending: false,
                onColumnClick: this._onColumnClick,
                data: 'string',
                isPadded: true
            });
            this._columns.push({
                key: "modifiedBy",
                name: "Modified By",
                fieldName: "modifiedBy",
                minWidth: 210,
                maxWidth: 350,
                isRowHeader: true,
                isResizable: true,
                isSorted: true,
                isSortedDescending: false,
                onColumnClick: this._onColumnClick,
                data: 'string',
                isPadded: true
            });
            this._columns.push({
                key: "fileSize",
                name: "File Size",
                fieldName: "fileSize",
                minWidth: 210,
                maxWidth: 350,
                isRowHeader: true,
                isResizable: true,
                isSorted: true,
                isSortedDescending: false,
                onColumnClick: this._onColumnClick,
                data: 'string',
                isPadded: true
            });        

        this.setState({
            items: this.Items,
            columns:  this._columns
        });      
    }

    

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