import React = require('react');

import { NavBarItem, NavBarLink} from "./interfaces";

class NavBarMenuItemComponent extends React.PureComponent<{ content: JSX.Element | string | null, onClick?: () => void }, { hover: boolean }> {
    constructor(props) {
        super(props);
        this.state = { hover: false };
    }

    private itemStyle: React.CSSProperties = {
        paddingLeft: "20px",
        paddingRight: "20px",
        paddingTop: "3px",
        paddingBottom: "3px",
        whiteSpace: "nowrap",
    };
    private handleOnMouseEnter = () => {
        this.setState({ hover: true });
    }

    private handleOnMouseLeave = () => {
        this.setState({ hover: false });
    }

    render() {
        const background = this.state.hover ? "rgba(47,164,231,1)" : "white";
        const color = this.state.hover ? "white" : "#333";

        const style = { background, color };
        return (

            <div
                onClick={this.props.onClick}
                style={{ ... this.itemStyle, ...style }}
                onMouseEnter={this.handleOnMouseEnter}
                onMouseLeave={this.handleOnMouseLeave} >
                {this.props.content}
            </div>
        );
    }
}

export class NavBarMenu extends React.PureComponent<{ items: NavBarLink[], height: number }, {}> {
    private containerStyle: React.CSSProperties = {
        position: "absolute",
        background: "white",
        top: (this.props.height + 1) + "px",
        right: 0,
        left: "auto",
        paddingTop: "5px",
        paddingBottom: "5px",
        borderBottomLeftRadius: "5px",
        borderBottomRightRadius: "5px",
        minWidth: "100%",
        boxShadow: "rgba(0,0,0,0.2) 0 6px 20px ",
        zIndex: 10000
    };


    render() {
        return (
            <div style={this.containerStyle}>
                {this.props.items
                    .filter(x => x)
                    .map((x, i) => !(x.visible == false) && <NavBarMenuItemComponent content={x.content} key={i} onClick={x.onClick} />)}
            </div>
        );
    }
}