"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 });
/* @flow */
const React = __importStar(require("react"));
const classnames_1 = __importDefault(require("classnames"));
{
    DrawerProps;
}
from;
'./types';
const classnames_2 = __importDefault(require("classnames"));
const prop_types_1 = __importDefault(require("prop-types"));
const ButtonBase_1 = __importDefault(require("@material-ui/core/ButtonBase"));
const react_router_1 = require("react-router");
const react_router_dom_1 = require("react-router-dom");
const urls_1 = __importDefault(require("components/config/urls"));
const types_1 = require("components/config/types");
const helpers_1 = require("components/helpers");
const withStyles_1 = __importDefault(require("components/hoc/withStyles"));
const ErrorBoundary_1 = __importDefault(require("components/hoc/ErrorBoundary"));
const Collapse_1 = __importDefault(require("@material-ui/core/Collapse"));
const kudoo_icon_png_1 = __importDefault(require("images/kudoo-icon.png"));
// import './styles.scss';
const styles_1 = __importDefault(require("./styles"));
class Drawer extends React.Component {
    constructor(props) {
        super(props);
        this.closeDrawer = () => {
            this.setState({
                closed: true,
                userMoreClosed: true,
            });
            if (this.props.onClose) {
                this.props.onClose();
            }
        };
        this.openDrawer = () => {
            this.setState({
                closed: false,
            });
            if (this.props.onOpen) {
                this.props.onOpen();
            }
        };
        const isTablet = helpers_1.mobileAndTabletcheck();
        if (isTablet) {
            if (this.props.onClose) {
                this.props.onClose();
            }
        }
        this.state = {
            closed: isTablet,
            userMoreClosed: true,
        };
    }
    componentDidUpdate(prevProps, prevState) {
        if (this.props.closed !== prevProps.closed) {
            this.setState({
                closed: this.props.closed,
            });
        }
    }
    _renderHamburgerIcon() {
        let { classes } = this.props;
        return (React.createElement("div", { className: classes.hamburgerIconWrapper, onClick: this.openDrawer },
            React.createElement("span", { className: classes.hamburgerIcon },
                React.createElement("i", { className: "icon icon-hamburger" }))));
    }
    _renderCloseIcon() {
        let { classes } = this.props;
        return (React.createElement("div", { className: classes.closeIconWrapper },
            React.createElement("span", { className: classes.closeIcon, onClick: this.closeDrawer },
                React.createElement("i", { className: "icon icon-close" }))));
    }
    _renderCompany() {
        let { name } = this.props.selectedCompany;
        let { classes, selectedCompany } = this.props;
        let { closed, userMoreClosed } = this.state;
        let rightArrowClass = classnames_2.default('icon-chevron-right', classes.moreRightArrow, {
            down: !userMoreClosed,
        });
        return (React.createElement("div", { className: classes.userWrapper },
            closed && (React.createElement("div", { className: classes.userImageWrapper },
                React.createElement("div", { className: classes.userInitial }, helpers_1.getFirstLetters(name)))),
            !closed && (React.createElement("div", { className: classes.usernameWrapper, onClick: () => {
                    this.setState({ userMoreClosed: !this.state.userMoreClosed });
                } },
                React.createElement("div", { className: classes.selectedCompanyName }, name),
                React.createElement("i", { className: rightArrowClass }))),
            React.createElement(Collapse_1.default, { component: "div", className: classes.userMoreWrapper, in: !userMoreClosed, timeout: "auto", unmountOnExit: true },
                this.props.companies.map((comp, index) => (React.createElement(ButtonBase_1.default, { classes: {
                        root: classnames_2.default(classes.userMoreItem, {
                            selected: comp.id === selectedCompany.id,
                        }),
                    }, style: { width: '100%' }, key: index, onClick: () => {
                        this.props.onCompanyClick(comp);
                        this.setState({ userMoreClosed: true });
                    } },
                    React.createElement("div", { className: classes.companyName }, comp.name),
                    comp.id === selectedCompany.id && (React.createElement("div", { className: classes.onlineStatus }))))),
                React.createElement(react_router_dom_1.Link, { to: urls_1.default.MANAGE_COMPANIES(), onClick: () => {
                        this.setState({ userMoreClosed: true });
                    }, style: { justifyContent: 'center' }, className: classes.userMoreItem },
                    React.createElement("div", { className: classes.manageCompanyBtn }, "Manage Companies")))));
    }
    _renderItems() {
        let { classes, renderMenuItem, menuItems } = this.props;
        return menuItems.map((item, index) => {
            let dom = (React.createElement(React.Fragment, null,
                React.createElement("div", { className: classes.drawerItem, key: index },
                    React.createElement("div", { className: classes.itemTitle }, item.menuItem))));
            if (renderMenuItem) {
                dom = renderMenuItem(item.menuItem);
            }
            return dom;
        });
    }
    _renderDrawer() {
        let { closed } = this.state;
        let { classes } = this.props;
        return (React.createElement("div", { className: classes.wrapper },
            React.createElement("div", { className: classes.upperPart },
                closed && this._renderHamburgerIcon(),
                !closed && this._renderCloseIcon(),
                this._renderCompany(),
                this._renderItems()),
            React.createElement("div", { className: classes.kudooIconWraper },
                React.createElement("img", { src: kudoo_icon_png_1.default, className: classnames_1.default(classes.kudooIconImage, { closed: closed }) }))));
    }
    render() {
        let { classes } = this.props;
        let drawerComponentClasses = classnames_2.default(classes.component, {
            closed: this.state.closed,
        });
        return (React.createElement(ErrorBoundary_1.default, null,
            React.createElement("div", { className: drawerComponentClasses }, this._renderDrawer())));
    }
}
Drawer.propTypes = Object.assign({}, types_1.withStylesProps, types_1.withRouterProps, { closed: prop_types_1.default.bool, onClose: prop_types_1.default.func, onOpen: prop_types_1.default.func, selectedCompany: prop_types_1.default.object, companies: prop_types_1.default.arrayOf(prop_types_1.default.object), onCompanyClick: prop_types_1.default.func, renderMenuItem: prop_types_1.default.func, menuItems: prop_types_1.default.array });
Drawer.defaultProps = {
    companies: [],
    selectedCompany: {},
    closed: false,
    onClose: () => { },
    onOpen: () => { },
    onCompanyClick: () => { },
};
exports.default = react_router_1.withRouter(withStyles_1.default(styles_1.default)(Drawer));
//# sourceMappingURL=index.js.map