"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const React = __importStar(require("react"));
const react_router_1 = require("react-router");
const react_router_dom_1 = require("react-router-dom");
const react_portal_1 = require("react-portal");
const classnames_1 = __importDefault(require("classnames"));
const idx_1 = __importDefault(require("idx"));
const urls_1 = __importDefault(require("components/config/urls"));
const withStyles_1 = __importDefault(require("components/hoc/withStyles"));
const Collapse_1 = __importDefault(require("@material-ui/core/Collapse"));
const ErrorBoundary_1 = __importDefault(require("components/hoc/ErrorBoundary"));
const TriangleArrow_1 = __importDefault(require("components/bosons/TriangleArrow"));
const styles_1 = __importDefault(require("./styles"));
const products = [
    { key: 'finance', value: 'Finance' },
    { key: 'health', value: 'Health' },
    { key: 'inventory', value: 'Inventory' },
    { key: 'project', value: 'Projects' },
    { key: 'mobile', value: 'Mobile' },
];
const HeaderBar = (props) => {
    let { classes, headerLabel, profile, noOfCompanies, onSelectProduct } = props;
    const [isUserMenuOpen, setIsUserMenuOpen] = React.useState(false);
    const [isProductMenuOpen, setIsProductMenuOpen] = React.useState(false);
    const [selectedProductIndex, selectProduct] = React.useState(0);
    let componentClass = classnames_1.default(classes.component);
    const _isActive = (url) => {
        const match = react_router_1.matchPath(idx_1.default(props, (_) => _.location.pathname), {
            path: url,
        });
        return Boolean(match);
    };
    const renderUserMenu = () => {
        return (React.createElement(Collapse_1.default, { in: isUserMenuOpen, timeout: "auto", unmountOnExit: true, className: classes.userMenu },
            React.createElement("div", null,
                React.createElement(react_router_dom_1.Link, { className: classes.userMenuItem, onClick: () => {
                        setIsUserMenuOpen(false);
                    }, to: urls_1.default.ACCOUNT_SETTINGS() },
                    React.createElement("div", { className: classes.userMenuItemLabel }, "Account Settings"),
                    React.createElement("div", { className: classes.userMenuItemIcon },
                        React.createElement("i", { className: classnames_1.default('icon icon-user-account') }))),
                React.createElement("div", { className: classes.userMenuItem, id: "header-bar-logout", onClick: () => {
                        if (props.actions) {
                            props.actions.logoutUser();
                        }
                        props.logout();
                        props.history.replace(urls_1.default.LOGIN());
                    } },
                    React.createElement("div", { className: classes.userMenuItemLabel }, "Logout"),
                    React.createElement("div", { className: classes.userMenuItemIcon },
                        React.createElement("i", { className: classnames_1.default('icon icon-logout') }))))));
    };
    const renderProductMenu = () => {
        return (React.createElement(Collapse_1.default, { in: isProductMenuOpen, timeout: "auto", unmountOnExit: true, className: classes.userMenu },
            React.createElement("div", null, products.map((product, index) => (React.createElement("div", { className: classes.userMenuItem, key: product.key, onClick: () => {
                    selectProduct(index);
                    setIsProductMenuOpen(false);
                    onSelectProduct(index, product);
                } },
                React.createElement("div", { className: classes.userMenuItemLabel }, product.value),
                selectedProductIndex === index && (React.createElement("div", { className: classes.userMenuItemIcon },
                    React.createElement("i", { className: classnames_1.default('icon icon-tick') })))))))));
    };
    return (React.createElement(ErrorBoundary_1.default, null,
        React.createElement("div", { className: componentClass },
            React.createElement("div", { className: classes.headerLeft },
                React.createElement("div", { className: classnames_1.default(classes.headerLabel) }, headerLabel)),
            React.createElement("div", { className: classes.headerRight },
                React.createElement("div", { className: classnames_1.default(classes.smallBtn, classes.userBtn, {
                        active: isProductMenuOpen,
                    }), id: "header-bar-username", onClick: () => {
                        setIsProductMenuOpen(!isProductMenuOpen);
                    } },
                    React.createElement("div", { className: classes.userName }, products[selectedProductIndex].value),
                    React.createElement(TriangleArrow_1.default, { direction: isProductMenuOpen && 'down' }),
                    renderProductMenu()),
                noOfCompanies > 0 && (React.createElement(react_router_dom_1.Link, { className: classnames_1.default(classes.smallBtn, {
                        active: _isActive(urls_1.default.CONFIGURATION()),
                    }), to: urls_1.default.CONFIGURATION() },
                    React.createElement("i", { className: classnames_1.default('icon icon-settings', classes.smallBtnIcon) }))),
                React.createElement("div", { className: classnames_1.default(classes.smallBtn, classes.userBtn, {
                        active: isUserMenuOpen,
                    }), id: "header-bar-username", onClick: () => {
                        setIsUserMenuOpen(!isUserMenuOpen);
                    } },
                    React.createElement("div", { className: classes.userName },
                        profile.firstName,
                        " ",
                        profile.lastName),
                    React.createElement(TriangleArrow_1.default, { direction: isUserMenuOpen && 'down' }),
                    renderUserMenu())),
            (isUserMenuOpen || isProductMenuOpen) && (React.createElement(react_portal_1.Portal, null,
                React.createElement("div", { onClick: () => {
                        setIsUserMenuOpen(false);
                        setIsProductMenuOpen(false);
                    }, className: classes.userMenuOverlay }))))));
};
HeaderBar.defaultProps = {
    headerLabel: 'Header',
    onSelectProduct: () => { },
};
exports.default = react_router_1.withRouter(withStyles_1.default(styles_1.default)(HeaderBar));
//# sourceMappingURL=index.js.map