import React = require('react');

import { NavBarItem, NavBarLink, light, lightHover, dark, darkHover, lightSelected, darkSelected } from "./interfaces";
import { NavBarMenu } from "./menu";




export const mapNavBarItem = (collapsed: boolean, height: number, onShouldCollapse: (() => void) | undefined, x: NavBarItem, i: number): JSX.Element | null => {
    if (x.visible == false) return null;

    return (
        <NavBarItemComponent
            items={x.items}
            light={x.light}
            collapsed={collapsed}
            height={height}
            key={i}
            onShouldCollapse={onShouldCollapse}
            selected={x.selected}
            onClick={x.onClick}
            borderless={x.borderless}
        >
            {x.content}
        </NavBarItemComponent>);
}

class NavBarItemComponent extends React.PureComponent<
    {
        height: number,
        collapsed: boolean,
        light?: boolean,
        selected?: boolean,
        onClick?: () => void,
        onShouldCollapse?: () => void,
        items?: NavBarItem[],
        borderless?: boolean
    },
    { hover: boolean, open: boolean }> {
    constructor(props) {
        super(props);

        this.state = { hover: false, open: false };
    }

    componentWillMount() {
        document.addEventListener("click", this.handleDocumentClick);
    }

    componentWillUnmount() {
        document.removeEventListener("click", this.handleDocumentClick);
    }

    private handleDocumentClick = (ev: Event) => {
        const isMenuFunc = (target: EventTarget | null) => {
            if (target == null) return false;
            if (target == this.divRef) {
                return true;
            }
            return isMenuFunc((target as Element).parentNode);
        };
        const isMenu = isMenuFunc(ev.target);
        if (!isMenu)
            this.setState({ open: false });
    }


    private handleOnMouseEnter = () => {
        this.setState({ hover: true });
    }

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

    private handleOnClick = () => {
        if (this.props.onClick) this.props.onClick();
        //Solo se debe de colapsar la barra si este no es un menu 
        if (this.props.onShouldCollapse && (!this.props.items || this.props.items.length == 0)) this.props.onShouldCollapse();

        this.setState(prev => ({ open: !prev.open }));
    }

    private handleRef = (div: HTMLDivElement) => {
        this.divRef = div;
    }

    private divRef: HTMLDivElement;

    render() {
        const itemPadding = this.props.borderless ? undefined : "0 10px 0 10px";

        const navBarItemStyle: React.CSSProperties = {
            height: this.props.height + "px",
            color: this.props.light ? "black" : "white",
            cursor: "pointer",
            position: "relative",

            padding: itemPadding,
            justifyContent: "center",
            flexDirection: "column",
            display: "flex",
            float: this.props.collapsed ? undefined : "left"
        };

        const getBackgroundColor = (hover: string, selected: string, normal: string | undefined) => {
            return this.state.hover ? hover : this.props.selected ? selected : normal;
        }

        const background = this.props.light ?
            getBackgroundColor(lightHover, lightSelected, light) :
            getBackgroundColor(darkHover, darkSelected, undefined);

        const showMenuItems = this.state.open && this.props.items;

        const div = <div
            ref={this.handleRef}
            style={{ ...navBarItemStyle, background }}
            onMouseEnter={this.handleOnMouseEnter}
            onMouseLeave={this.handleOnMouseLeave}
            onClick={this.handleOnClick}
        >
            {
                this.props.children
            }
            {
                showMenuItems && !this.props.collapsed && this.props.items &&
                <NavBarMenu items={this.props.items} height={this.props.height} />
            }
        </div>;
        return (
            this.props.collapsed ?
                <div style={{ position: "relative" }}>
                    {div}
                    {
                        showMenuItems && this.props.collapsed &&
                        <div style={{ marginLeft: "5px" }}>
                            {this.props.items &&
                                this.props.items
                                    .filter(x => x)
                                    .map((x, i) => x && mapNavBarItem(true, this.props.height, this.props.onShouldCollapse, x, i))}
                        </div>
                    }
                </div> : div
        );
    }
}