import * as React from 'react';
import { Button, RightArrow } from '@skava/packages/ui';
import { handleMenuDropDownToggle } from '@skava/packages/features/Header/state';
//
import MenuInnerNavItem from '../MenuInnerNavItem';
import MenuDropdown from '../_MenuDropdown';
import { InnerNavItem, 
// @todo - wrappers should export simpler components
DropdownItemsWrapper, DropdownImageWrapper, DropDownImage, NavItem, DropDownItemContainer, StyledViewAll, } from './styled';
const toMenuLink = (identifier) => `/categoryLanding/${identifier}`;
const renderNestedNavItem = (item, isHeader) => {
    return (React.createElement(InnerNavItem, null,
        React.createElement(MenuInnerNavItem, Object.assign({ key: item.identifier }, item, { isHeader: isHeader }))));
};
const renderDropDownPane = (item, renderInnerNavItem) => {
    const { children = item.categories, image, name, identifier } = item;
    // console.debug('_________________renderDropDownPane_________')
    // console.log(item)
    const listView = children.map(renderInnerNavItem);
    // @todo @fixme @wording
    const viewAllThing = 'View All ' + name;
    const headerView = (React.createElement(StyledViewAll, { to: toMenuLink(identifier), text: viewAllThing, onClick: handleMenuDropDownToggle, "data-qa": "qa-view-all" }));
    const menuWrap = (React.createElement(DropDownItemContainer, null,
        headerView,
        listView));
    const imageView = image && (React.createElement(DropdownImageWrapper, { key: "imagewrap" },
        React.createElement(DropDownImage, { alt: name, src: image })));
    const wrapView = React.createElement(DropdownItemsWrapper, { key: "list", children: menuWrap });
    return [wrapView, imageView];
};
const renderTopLevelTitle = (item) => {
    const { destination, name, onClick } = item;
    // @todo !!!!!!! @FIXME !!! THIS GIVES DIFFERENT DOM ON SERVER & BROWSER, MAJOR IMPACT
    // return media.isTouchEnabled
    //   ? <Button className="dropdown-title">{name}</Button>
    //   : <Link className="dropdown-title" to={destination}>{name}</Link>
    return (React.createElement(Button, { className: "dropdown-title", onClick: onClick }, name));
};
// @todo - aria-has-dropdown by passing hasDropdown
const renderMenuDropDown = (props) => {
    const { boxView, titleView, item } = props;
    const { onClick, hasDropDown } = item;
    if (hasDropDown === false) {
        return undefined;
    }
    return (React.createElement(NavItem, { key: item.identifier + item.name },
        React.createElement(MenuDropdown, { item: item, icon: React.createElement(RightArrow, null), title: titleView, onClick: onClick }, boxView)));
};
export { renderNestedNavItem, renderDropDownPane, renderTopLevelTitle, renderMenuDropDown };
//# sourceMappingURL=_renderProps.js.map