import * as React from 'react';
import 'office-ui-fabric-react/lib/components/Modal/examples/Modal.Basic.Example.scss';
import {EntityService} from '../../../../Services';
import {    
    IColumn
} from 'office-ui-fabric-react/lib/DetailsList';
import { Breadcrumb } from 'office-ui-fabric-react/lib';
import { Entity } from '../../../../Models';
import {RouteComponentProps} from 'react-router';
import {ListView} from "../../../../Controls"
import { Redirect} from "react-router-dom";
import './EntityList.css'

let _items: Entity[] = [];

export interface IData {
    columns: IColumn[];
    items: Entity[];
}

export class EntityList extends React.Component<{} & RouteComponentProps<{id:number}>, any>
{
private _entityService : EntityService = new EntityService();
    constructor(props: {} & RouteComponentProps<{id:number}>) {
        super(props);
        this.state = {
            items: _items,
            columns: new Array<IColumn>(),
            redirectToDetails: false,
            selectedItem: { workspaceId: this.props.match.params.id}
        };
        this.loadColumns();
        this.loadEntities(this.props.match.params.id);
    }
    private loadColumns(){
        this.state.columns.push({
            dataType: 'string',
            name: 'Name',
            fieldName: 'displayName',
            minWidth: 180,
            maxWidth: 350            
        },{
            dataType: 'string',
            name: 'Description',
            fieldName: 'description',
            minWidth: 300,
            maxWidth: 500
        })
    }

    private selectedEntityChanged(entity:Entity){
        if(!entity)
            return;
            
        this.setState({selectedItem : entity});
        this.setState({redirectToDetails:true});
    }
    public render(): JSX.Element {
        return (
            this.state.redirectToDetails?<Redirect to={"/recordsList/" + this.state.selectedItem.id} push></Redirect>
            :
            <div>
                <div className="ms-Grid-row">
                    <div className="ms-Grid-col ms-lg10">
                        <Breadcrumb
                            items={[
                                { text: 'Workspaces', key: 'Workspace',href:"/workspace" },

                            ]}
                            ariaLabel={'Website breadcrumb'}
                        />
                    </div>
                </div>
                <div className="ms-Grid-row">
                    <div className="ms-Grid-col ms-lg12" >
                    <ListView
                        Items = {this.state.items} 
                        selectionModeType={false}
                        SelectedItemChanged={this.selectedEntityChanged.bind(this)}
                        Columns={this.state.columns} />
                </div>
                </div>
            </div>
        );
    }

    loadEntities = (workspaceId:number) =>{
        this._entityService.listEntities(workspaceId).then(result=>{
            this.setState({items:result})
        }, error => {
            alert(error.text());
        });
    }

}