import React from 'react';
import { observable } from 'xmobx/mobx';
import { application } from 'state/application';
import { pancakeSidebar } from 'src/views/layouts/Sidebarz';
import { MobileMenuSidebar } from 'widgets/MobileMenu/MobileMenuSidebar';
import { CategoryListConsumer } from 'state/categories/contexts/CategoryList';
const state = observable({
    isMenuVisible: false,
    isMenuDropDownVisible: false,
    isSearchMenuVisible: false,
    isTopHeaderVisible: false,
    setIsMenuVisible,
    setIsMenuDropDownVisible,
    setIsSearchMenuVisible,
    hide,
    show,
    handleClickBoundary,
    handleMenuToggle,
    handleShowDepartments,
    handleMenuDropDownToggle,
    handleShowMobileMenu,
    setMenuDropDownVisibility,
});
// should be simpler like @see state/common
// these are actions
// mobile menu...
function setIsMenuVisible(visibility) {
    state.isMenuVisible = visibility;
}
// desktop menu - changes on wr
function setIsMenuDropDownVisible(visibility) {
    state.isMenuDropDownVisible = visibility;
}
// wr only...
function setIsSearchMenuVisible(visibility) {
    state.isSearchMenuVisible = visibility;
}
function hide() {
    if (state.isMenuDropDownVisible) {
        state.isMenuDropDownVisible = false;
    }
}
function show() {
    if (!state.isMenuDropDownVisible) {
        state.isMenuDropDownVisible = true;
    }
}
function handleClickBoundary(event, element) {
    // SKB2B-1340
    const { target } = event;
    const text = target.textContent.toLowerCase();
    if (text !== 'departments') {
        state.hide();
    }
}
function handleMenuToggle() {
    state.isMenuVisible ? state.setIsMenuVisible(false) : state.setIsMenuVisible(true);
    console.log('[Header] handleMenuToggle', state.isMenuVisible);
}
function handleMenuDropDownToggle() {
    if (state.isMenuDropDownVisible) {
        state.hide();
    }
    else {
        state.show();
    }
    console.log('[Header] handleMenuDropDownToggle', state.isMenuDropDownVisible);
}
/**
 * @todo @fixme !!!!!!
 * putting dom inside of contents is not the same as what we do on minicart
 * @type @action
 */
const renderMobileMenu = (context) => (React.createElement(MobileMenuSidebar, { state: pancakeSidebar, onLinkClicked: handleMenuToggle, onToggle: handleShowMobileMenu }));
function handleShowMobileMenu() {
    pancakeSidebar.setIsVisible(!pancakeSidebar.isVisible);
}
/**
 * @todo this isn't a component, won't update...?
 * @todo this should factor in rehydration hit and happen on mount?
 */
const renderSidebar = () => {
    const isTabletOrSmaller = (application.isTablet || application.isPhone) &&
        !application.isDesktop &&
        typeof window === 'object';
    if (!isTabletOrSmaller) {
        console.warn('[pancake] skipping');
        return '';
    }
    console.log('[pancake] rendering');
    return React.createElement(CategoryListConsumer, null, renderMobileMenu);
    // @todo this seems like the wrong link to click!?
    // return state.isVisible && <MobileMenu onLinkClicked={handleMenuToggle} />
};
pancakeSidebar.setRender(renderSidebar);
/**
 * @todo handle this and handle close here?
 */
function handleShowDepartments() {
    alert('search dropdown');
}
// @note - this was in wr
function setMenuDropDownVisibility() {
    console.debug('[menu] isMenuDropDownVisible');
    state.setIsMenuDropDownVisible(false);
    // state.setIsMenuDropDownVisible(!state.isMenuDropDownVisible)
}
setMenuDropDownVisibility();
// @@todo @@perf @@devtools @@security
if (typeof window === 'object') {
    console.warn('@@prod @@perf remove global');
    window.menuState = state;
}
export default state;
export { state, handleMenuDropDownToggle, handleShowDepartments, handleShowMobileMenu, handleMenuToggle, };
//# sourceMappingURL=state.js.map