/**
 * @@packages @file @todo @@semantic @@html5 @@wcag
 * ^ don't do `<Link><Button>` just use 1 or the other
 */
import * as React from 'react';
import { styled } from 'styleh-components';
/**
 * @todo @name @@fixme not element
 */
import { SeparatorElement as Separator } from '@skava/packages/ui';
import { isArray, EMPTY_ARRAY } from 'exotic';
import { sessionContainer } from '@skava/packages/core/auth/session/container';
import { LoginLogoutButtonGroup as HeaderAccountLoginLogout } from '@skava/packages/features/Header/TopBar/TopBarRight';
import { LocaleModalTrigger as HeaderLocale, TopBarLinkCurrency, TopBarLinkCountry, } from '@skava/packages/features/Locale';
import { AccountIcon, CommunityIcon, LocationIcon, CalendarIcon } from '@skava/packages/ui';
import { Link } from '@skava/link';
import { wording, footerLinks } from './fixture';
import { MobileNav, SideBarWrap, SideBarPageTitle, SideBarBackWrap, SideBarPageImage, SideBarTitleText, HeaderLinkWrap, MobileMenuFooter, SideBarPageTitleWrapper, HeaderIconWrap, MobileMenuFooterLink, StyledCopyRight, StyledFlatButton, NavLinkList, MobileMenuTopPanel, MobileMenuBottomPanel, } from './styled';
// @todo should be dynamic
// @todo should be in sidebar groups - top, middle, buttom
const locatorIconView = (React.createElement(HeaderIconWrap, { key: "locator-wrap" },
    React.createElement(LocationIcon, { className: "menu-location-icon" })));
const accountIconView = (React.createElement(HeaderIconWrap, { key: "account-wrap" },
    React.createElement(AccountIcon, { color: "#292929" })));
const communityIconView = (React.createElement(HeaderIconWrap, { key: "community-wrap" },
    React.createElement(CommunityIcon, null)));
const calendarIconView = (React.createElement(HeaderIconWrap, { key: "calendar-wrap" },
    React.createElement(CalendarIcon, null)));
// StyledHeaderAccountLoginLogout
// styled(HeaderAccountLoginLogout)
const StyledHeaderAccountLoginLogoutWrap = styled.div `
  display: flex;
  flex-direction: row;
  button,
  span,
  a {
    align-items: center;
    display: flex;
    color: var(--color-pure-white);
  }
  a span {
    font: 400 1rem 'Roboto', Arial, Helvetica, sans-serif;
  }
  a span,
  .separator {
    color: var(--color-pure-white);
  }
  .separator {
    display: flex;
    align-items: center;
  }
`;
const MyAccountButtonAdapter = (props) => {
    return (React.createElement(StyledHeaderAccountLoginLogoutWrap, { key: "header-account-reused-on-sidebar" },
        React.createElement(StyledFlatButton, { key: "header-myaccount-button", isHeader: true, className: props.className, "aria-label": wording.myAccountAlt, icon: accountIconView }),
        React.createElement(HeaderAccountLoginLogout, { key: "header-account-reused-on-sidebar" })));
};
/**
 * @todo convert to non className
 */
const MyAccountButton = styled(MyAccountButtonAdapter) `
  .svg-icon-account {
    path {
      fill: var(--color-pure-white);
    }
  }
`;
// @todo - Need to replace the Icon which releted to this.
const ClassesEventsButton = () => {
    return (React.createElement(Link, { to: '/orderlookup', role: "link" },
        React.createElement(StyledFlatButton, { text: wording.trackOrder, icon: calendarIconView, qa: "qa-track-order" })));
};
// @todo - Need to replace the Icon which releted to this.
const CommunityButton = () => {
    return (React.createElement(Link, { to: wording.pancakeCustomerSupportLink, role: "link" },
        React.createElement(StyledFlatButton, { text: wording.customerSupport, icon: communityIconView, qa: "qa-customer-support" })));
};
const StoreLocatorButton = () => {
    return (React.createElement(Link, { to: '/storelocator', role: "link" },
        React.createElement(StyledFlatButton, { text: wording.storelocator, icon: locatorIconView, qa: 'qa-stores', "aria-label": 'store-locator' })));
};
const LanguageButton = styled(HeaderLocale) `
  ${Separator} {
    padding: 0 .5rem;
  }
  ${Separator}, ${TopBarLinkCurrency}, ${TopBarLinkCountry} {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-black);
    &:hover {
      color: var(--color-black);
    }
  }
`;
const HeaderLinkView = (props) => {
    if (props.isFrontPage === false) {
        return '';
    }
    return (React.createElement(HeaderLinkWrap, { key: "header-link-wrap" },
        React.createElement(MyAccountButton, { isRegisteredUser: sessionContainer.isRegisteredUser })));
};
const BottomLinkView = () => {
    return (React.createElement(MobileMenuFooter, { key: "header-link-wrap" },
        React.createElement(CommunityButton, null),
        sessionContainer.isRegisteredUser === false && React.createElement(ClassesEventsButton, null),
        React.createElement(StoreLocatorButton, null),
        React.createElement(LanguageButton, null)));
};
class FooterLinkList extends React.PureComponent {
    renderItem(link) {
        const { text, url, qa } = link;
        return React.createElement(StyledFlatButton, { isFooter: true, to: url, id: text, text: text, qa: qa });
    }
    render() {
        const { list } = this.props;
        if (isArray(list)) {
            return list.map(this.renderItem);
        }
        return EMPTY_ARRAY;
    }
}
FooterLinkList.defaultProps = {
    list: EMPTY_ARRAY,
};
const FooterLinkView = () => {
    return (React.createElement(MobileMenuFooterLink, { key: "header-link-wrap" },
        React.createElement(FooterLinkList, { list: footerLinks }),
        React.createElement(StyledCopyRight, { copyrightLogo: wording.copyrightLogo })));
};
export { NavLinkList, MobileNav, SideBarWrap, SideBarPageTitle, SideBarBackWrap, SideBarPageImage, SideBarTitleText, HeaderLinkWrap, SideBarPageTitleWrapper, HeaderIconWrap, StoreLocatorButton, LanguageButton, MyAccountButton, CommunityButton, ClassesEventsButton, HeaderLinkView, BottomLinkView, FooterLinkView, MobileMenuTopPanel, MobileMenuBottomPanel, StyledFlatButton, };
//# sourceMappingURL=renderProps.js.map