import React = require('react');

import { NavBarContainer } from "./bars";
import { NavBarItem } from "./interfaces";
export { NavBarItem } from "./interfaces";

export interface NavBarProps {
    header?: NavBarItem[];
    /**Arreglo con el contenido de los items que se van a ver en el lado izquierdo de la barra */
    left?: NavBarItem[];

    /**Arreglo con el contenido de los items que se van a ver en el lado derecho de la barra */
    right?: NavBarItem[];
    height?: number;
    collapsedWidth?: number
}

/**Una barra de navegación, enciere en un div con márgenes negativos para ajustar a la página */
export class NavBar extends React.Component<NavBarProps, { collapsed: boolean }> {
    constructor(props) {
        super(props);
        this.state = { collapsed: false };
    }

    componentWillMount() {
        window.addEventListener("resize", this.handleResize);
        this.handleResize();
    }

    componentWillUnmount() {
        window.removeEventListener("resize", this.handleResize);
    }

    private handleResize = () => {
        this.setState({ collapsed: (document.documentElement.clientWidth < (this.props.collapsedWidth || 768)) });
    }

    render() {
        return <NavBarContainer {...{ ... this.props, height: this.props.height || 36 }} collapsed={this.state.collapsed} />
    }
}