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


export interface IDetailsListDocumentsExampleState {
    columns: IColumn[];
    items: Folder[];
}
export class FoldersList extends React.Component<any, IDetailsListDocumentsExampleState> {
    private _selection: Selection;
    private _columns: IColumn[] = [];
    
private _fileService: FileService = new FileService();
    constructor(props: any) {
        super(props); 
        this._selection = new Selection({
            onSelectionChanged: () => {
                this.props.SelectedItemChanged(this._selection.getSelection()[0] as Folder);
            }
          }); 
    }

    private _onColumnClick = (ev: React.MouseEvent<HTMLElement>, column: IColumn): void => {
        let newItems: Folder[] = this.props.Items.slice();
        const newColumns: IColumn[] = this._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);
    };

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

    public render() {  
        return (
            <div>
                <MarqueeSelection selection={this._selection}>
                    <DetailsList
                        items={this.props.Items}
                        columns={this._columns}
                        setKey="set"
                        selectionMode = {SelectionMode.single}
                        layoutMode={DetailsListLayoutMode.justified}
                        isHeaderVisible={true}
                        selection={this._selection}
                        selectionPreservedOnEmptyClick={true}
                        enterModalSelectionOnTouch={true}
                    />
                </MarqueeSelection>
            </div>
        );
    }

    componentDidMount() {
        this._columns.push({
            key:"folderThumbnail",
            name: "Icon",
            fieldName: "thumbnail",
            headerClassName: 'DetailsListExample-header--FileIcon',
            className: 'DetailsListExample-cell--FileIcon',
            iconClassName: 'DetailsListExample-Header-FileTypeIcon',
            minWidth: 16,
            maxWidth: 16,
            isRowHeader: true,
            isResizable: true,
            isSorted: true,
            isSortedDescending: false,
            onColumnClick: this._onColumnClick,
            data: 'string',
            isPadded: true,
            onRender: (item: Folder) => {
                return <img src={this._fileService.getFullPath(item.thumbnail)} className={'DetailsListExample-documentIconImage'} />;
              }
        });
        this._columns.push({
            key:"folderName",
            name: "Folder Name",
            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
        });
    }  

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


export default FoldersList;