"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.HeaderVertical = void 0;
var React = __importStar(require("react"));
var react_1 = require("react");
var react_animate_height_1 = __importDefault(require("react-animate-height"));
var react_router_dom_1 = require("react-router-dom");
var faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
var UserAvatar_1 = require("../UserAvatar");
var S = __importStar(require("./HeaderVertical.style"));
var HeaderVertical = function (props) {
    var _a, _b;
    var _c = React.useState(!!props.__menuMobileOpen), menuMobile = _c[0], setMenuMobile = _c[1];
    var _d = React.useState(!!props.__openUserMenuInfo), openUserMenuInfo = _d[0], setOpenUserMenuInfo = _d[1];
    var history = (0, react_router_dom_1.useHistory)();
    (0, react_1.useEffect)(function () {
        history.listen(function (location, action) {
            setMenuMobile(false);
        });
    }, []);
    var toggleMenuMobile = function () { return setMenuMobile(!menuMobile); };
    var closeUserMenuInfo = function () { return setOpenUserMenuInfo(false); };
    var toggleUserMenuInfo = function () { return setOpenUserMenuInfo(!openUserMenuInfo); };
    var sharedProps = __assign(__assign({}, props), { menuMobile: menuMobile, openUserMenuInfo: openUserMenuInfo, toggleMenuMobile: toggleMenuMobile, closeUserMenuInfo: closeUserMenuInfo, toggleUserMenuInfo: toggleUserMenuInfo });
    var _e = (0, react_1.useState)(-1), subMenuOpen = _e[0], setSubMenuOpen = _e[1];
    return (React.createElement(S.Container, { open: menuMobile },
        React.createElement("div", { className: "logo-container" },
            React.createElement("div", { className: "d-flex align-items-center" },
                React.createElement("div", { className: "menu-icon" },
                    React.createElement("div", { className: "ds-menu-hamburger ".concat(menuMobile ? 'open' : ''), onClick: toggleMenuMobile },
                        React.createElement("span", null),
                        React.createElement("span", null),
                        React.createElement("span", null))),
                React.createElement("div", { className: "flex-fill" },
                    !!props.homeLink && (React.createElement(react_router_dom_1.NavLink, { to: { pathname: props.homeLink }, exact: true },
                        React.createElement("div", { className: "ds-logo" },
                            React.createElement("img", { src: props.logo, alt: "" })))),
                    !props.homeLink && (React.createElement("div", { className: "ds-logo" },
                        React.createElement("img", { src: props.logo, alt: "" })))),
                React.createElement("div", { className: "actions-container" }, props.actionsElements))),
        React.createElement("div", { className: "username-container" },
            React.createElement("div", { className: "user-image-container" },
                React.createElement(UserAvatar_1.UserAvatar, { user: props.user, sizeCircle: 50 })),
            React.createElement("div", { className: "username-name" },
                React.createElement("span", { className: "username" }, (_a = props.user) === null || _a === void 0 ? void 0 : _a.name),
                React.createElement("div", { className: "role" }, ((_b = props.user) === null || _b === void 0 ? void 0 : _b.role) || 'Usuário'),
                props.myAccountRoute && (React.createElement("div", { className: "text-left" },
                    React.createElement(react_router_dom_1.NavLink, { key: props.myAccountRoute, className: "ds-item", to: { pathname: props.myAccountRoute }, exact: true }, "Meu Perfil"))))),
        React.createElement("div", { className: "menu-container" }, props.menu.map(function (item, i) { return (React.createElement("span", { key: "".concat(item.route, "-").concat(i) },
            item == 'division' && React.createElement("hr", null),
            !(item === null || item === void 0 ? void 0 : item.subMenu) && item != 'division' && React.createElement(Menu, __assign({}, item)),
            !!(item === null || item === void 0 ? void 0 : item.subMenu) && (React.createElement(SubMenu, __assign({}, item, { open: subMenuOpen == i, openSubmenu: function () { return setSubMenuOpen(i); }, closeSubmenu: function () { return setSubMenuOpen(-1); } }))))); }))));
};
exports.HeaderVertical = HeaderVertical;
var Menu = function (props) {
    if (props.titleCategory) {
        return React.createElement("div", { className: "title-category" }, props.title);
    }
    return (React.createElement(react_router_dom_1.NavLink, { className: "menu-item", activeClassName: "active", to: { pathname: props.route }, exact: true },
        React.createElement("div", { className: "title" }, props.title)));
};
var SubMenu = function (props) {
    var isSubRoute = function (location, subMenu) {
        return !subMenu.every(function (item) { return item.route !== location.pathname; });
    };
    (0, react_1.useEffect)(function () {
        if (isSubRoute(window.location, props.subMenu)) {
            props.openSubmenu();
        }
    }, []);
    return (React.createElement("div", { className: "menu-category ".concat(!props.open || 'open') },
        React.createElement(react_router_dom_1.NavLink, { key: props.route, className: "menu-item ".concat(!props.open || 'open'), activeClassName: "menu-item-active", to: {
                pathname: props.route,
            }, onClick: function (e) {
                e.preventDefault();
                if (props.open) {
                    props.closeSubmenu();
                }
                else {
                    props.openSubmenu();
                }
            }, isActive: function (match, location) { return isSubRoute(location, props.subMenu); } },
            React.createElement("div", { className: "title" }, props.title),
            React.createElement("div", { className: "caret" },
                React.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: faChevronDown_1.faChevronDown, flip: "horizontal" }))),
        React.createElement(react_animate_height_1.default, { id: "example-panel", duration: 500, height: props.open ? 'auto' : 0 },
            React.createElement("div", { className: "menu-subcategory" }, props.subMenu.map(function (subItem, i) { return (React.createElement(react_router_dom_1.NavLink, { key: "".concat(subItem.route, "-").concat(i), className: "item", activeClassName: "active", to: {
                    pathname: subItem.route,
                }, exact: true }, subItem.title)); })))));
};
//# sourceMappingURL=HeaderVertical.js.map