import * as React from 'react';
//
import { MaterialIcon, HeaderPancakeIcon } from '@skava/packages/ui';
import { CategoryListContext } from '@skava/packages/core/categories';
import { CartTriggerIconButton } from '@skava/packages/core/cart';
import { pancakeSidebar } from 'src/views/App/Sidebarz';
//
import { state, handleMenuDropDownToggle, handleShowMobileMenu, } from '../state';
import { FavoriteIconWithCount } from './FavoriteIconWithCount';
import SearchBar from './SearchBar';
import { SearchGroup, SearchDropDown, DropWrapper, DropDownButton, HeaderButtonGroup, HeaderBox, HeaderWrap, StyledLogo, HamburgerButton, StoreLocatorIcon, StyledStoreLocatorButtonLink, } from './styled';
import { wording } from './fixture';
import { toDropDownCategories } from './deps';
// config.get('pathParams').storelocator
const StoreLocatorButton = (props) => (React.createElement(StyledStoreLocatorButtonLink, Object.assign({ to: '/storeLocator', "aria-label": 'Store locator', "data-qa": 'qa-stores', children: React.createElement(StoreLocatorIcon, null), role: 'link' }, props)));
// const StoreLocatorButton = props => <span>eh</span>
class SearchAllDropDown extends React.PureComponent {
    render() {
        // isMenuExpanded
        const categoryList = this.context;
        const categories = toDropDownCategories(categoryList);
        return (React.createElement(DropWrapper, { key: 'dropdown' },
            React.createElement(SearchDropDown, { options: categories, qa: 'qa-search-all', shouldBeAbsolute: true })));
    }
}
SearchAllDropDown.contextType = CategoryListContext;
/**
 * @todo move categoryList into MiddleBar
 */
class MiddleBar extends React.Component {
    constructor() {
        super(...arguments);
        /**
         * @todo this is not used 0.0
         */
        this.handlePageMovement = () => {
            const height = document.getElementById('topHeader').clientHeight;
            if (window.pageYOffset - height > 0) {
                state.isTopHeaderVisible = true;
            }
            else {
                state.isTopHeaderVisible = false;
            }
        };
    }
    render() {
        const { isMenuDropDownVisible } = state;
        const favoriteIconView = process.env.BUSINESS_RELATIONSHIP === 'B2C' && (React.createElement(FavoriteIconWithCount, { key: 'favorite-icon' }));
        const menuArrowIcon = isMenuDropDownVisible ? 'up' : 'down';
        return (React.createElement(HeaderWrap, { isMenuExpanded: isMenuDropDownVisible, className: this.props.className },
            React.createElement(HeaderBox, null,
                React.createElement(HamburgerButton, { className: 'menu-button', isActive: pancakeSidebar.isVisible, onClick: handleShowMobileMenu, icon: React.createElement(HeaderPancakeIcon, null), "aria-label": 'Open Menu', qa: 'qa-department', key: 'hamburger' }),
                React.createElement(StyledLogo, { key: 'logo' }),
                React.createElement(DropDownButton, { onClick: handleMenuDropDownToggle, 
                    // @todo @fixme
                    className: 'dropdown-button', iconOrder: 10, 
                    // @todo @fix arrow icons come on!
                    // isDropdownClicked={isDropdownClicked}
                    icon: React.createElement(MaterialIcon, { type: menuArrowIcon }), 
                    // @todo wording @fixme
                    text: wording.departments, qa: 'qa-departments', key: 'dropdown' }),
                React.createElement(SearchGroup, { key: 'search' },
                    React.createElement(SearchAllDropDown, { key: 'dropdown' }),
                    React.createElement(SearchBar, { key: 'searchbar' })),
                React.createElement(HeaderButtonGroup, { key: 'header' },
                    favoriteIconView,
                    React.createElement(StoreLocatorButton, { key: 'store-icon' }),
                    React.createElement(CartTriggerIconButton, { key: 'cart-icon' })))));
    }
}
export { MiddleBar };
export default MiddleBar;
//# sourceMappingURL=MiddleBar.js.map