import * as React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom"
import { Header,SideBarLeft } from "../../Controls"
import DriveDetails from "./Modules/Documents/DriveDetails";
import FolderDetails from "./Modules/Documents/FolderDetails";
import { FileService,EntityService} from "../../Services";
import { INavLink,INavLinkGroup} from 'office-ui-fabric-react/lib/Nav';

export class Document extends React.Component<any,any> {
    private _fileService:FileService = new FileService();
    private _entityService:EntityService = new EntityService();

    constructor(props:any) {
        super(props);
        this.state = {
            groups: new Array<INavLinkGroup>()
        };
        this.loadLinks();
    }
    

    private loadLinks(){        
        let links:INavLink[] = new Array<INavLink>();

        if(true){
            let link:INavLink = { name: 'WorkSpaces', url: '/workspace', key: 'workspace',isExpanded: true}; 
            
            this._entityService.listWorkspaces()
            .then((result)=>{
                link.links = new Array<INavLink>();
                for (let workspace of result) {
                    link.links.push({ name: workspace.displayName, url: '/entitylist/' + workspace.id, key: 'workspace'+workspace.id });
                }
                this.setState({groups:this.state.groups});
            });
            
            links.push(link);
        }

        if(true){
            let link:INavLink = { name: 'Documents', url: '/drive', key: 'drives',isExpanded: true}; 
            
            this._fileService.listDrives()
            .then((result)=>{
                link.links = new Array<INavLink>();
                for (let drive of result) {
                    link.links.push({ name: drive.name, url: '/drive/' + drive.id, key: 'drive'+drive.id });

                }
                this.setState({groups:this.state.groups});
            });
            
            links.push(link);
        }

        this.state.groups.push({links});
    }

    public render(): JSX.Element {
    return (
        <BrowserRouter>
            <div>
                <div>
                    <Header />
                </div>
                <div className="ms-Grid">
                    <div className="ms-Grid-row">
                        <div style={{ display: 'inline-block', float: 'left' }}> <SideBarLeft Groups={this.state.groups} /> </div>
                        <div className="ms-Grid-col ms-sm6 ms-md8 ms-lg10">
                        <Switch>
                                <Route path="/drive/:id" component={DriveDetails} exact></Route>
                                <Route path="/folder/:id" component={FolderDetails} exact></Route>
                            </Switch>
                        </div>
                    </div>
                </div>
            </div>
        </BrowserRouter>
    )
}
}

export default Document;