import React from "react";

import * as PersonActions from "../Flux/Actions/PersonActions";

import Sidebar from "react-sidebar";
import SidebarContent from "./SidebarContent";
import CustomNavbar from "./CustomNavbar";

export default class Layout extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

            //User state
            person: PersonActions.loadPerson(),

            //Sidebar states
            docked: false,
            open: false,
            transitions: true,
            touch: true,
            shadow: true,
            pullRight: false,
            touchHandleWidth: 20,
            dragToggleDistance: 30

        };
    }

    onSetDocked(docked) {
        this.setState({docked: docked});
    }

    menuButtonClick(ev) {
        ev.preventDefault();
        this.onSetDocked(!this.state.docked);
    }

    render() {
        const sidebarContent = <SidebarContent onClick={this.menuButtonClick.bind(this)}/>;
        return (
            <Sidebar
                sidebar={sidebarContent}
                open={this.state.open}
                docked={this.state.docked}
                onSetDocked={this.onSetDocked.bind(this)}
            >
                <CustomNavbar onClick={this.menuButtonClick.bind(this)}/>
                <div className="content">
                    {this.props.children}
                </div>
            </Sidebar>
        );
    }
}