import * as React from 'react';
import { EMPTY_ARRAY } from 'exotic';
import { ArrowIcon, Image as ImageWrap } from '@skava/packages/ui';
import { SideBarWrap, SideBarPageTitle, SideBarBackWrap, SideBarPageImage, SideBarTitleText, SideBarPageTitleWrapper, NavLinkList, MobileMenuTopPanel, MobileMenuBottomPanel, SidebarPageLink, SidebarBrowseLink, } from './styled';
import { HeaderLinkView, BottomLinkView, FooterLinkView } from './renderProps';
import { qa } from './fixture';
import { container } from './container';
const leftArrow = React.createElement(ArrowIcon, { left: true, color: '##1E1E1E' });
const rightArrow = React.createElement(ArrowIcon, { right: true, color: '##1E1E1E' });
export class MobileMenuPage extends React.PureComponent {
    constructor() {
        super(...arguments);
        // qa.shopCategory
        this.renderPageLink = (page) => {
            const { destination, name } = page;
            const { onLinkClicked } = this.props;
            return (React.createElement(SidebarPageLink, { key: 'page-link-' + destination, onClick: onLinkClicked, to: destination, text: name }));
        };
    }
    // @example USD | English
    renderBrowseLink(page) {
        const handleClick = () => container.goToPage(page);
        const { name } = page;
        //  qa={qaVal}
        return (React.createElement(SidebarBrowseLink, { key: 'browse-link-' + name, onClick: handleClick },
            name,
            rightArrow));
    }
    render() {
        const { index, item } = this.props;
        const { image, name, categories = EMPTY_ARRAY, isActive } = item;
        const { isFrontPage } = container;
        const linksView = isActive === true &&
            categories
                .filter(Boolean)
                .map(link => link.categories && link.categories.length > 0
                ? this.renderBrowseLink(link)
                : this.renderPageLink(link));
        const handleHeaderClick = () => {
            isFrontPage ? container.goToPage(item) : container.goBack(item);
        };
        return (React.createElement(SideBarWrap, { index: index },
            React.createElement(MobileMenuTopPanel, null,
                React.createElement(HeaderLinkView, { isFrontPage: true }),
                React.createElement(SideBarPageTitleWrapper, { onClick: handleHeaderClick, key: "mobile-page-title" },
                    image && (React.createElement(SideBarPageImage, null,
                        React.createElement(ImageWrap, { src: image, alt: name }))),
                    isFrontPage === false && (React.createElement(SideBarPageTitle, { "data-qa": qa.title[index - 1], key: "PageTitle" },
                        React.createElement(SideBarBackWrap, { onClick: () => {
                                container.goBack(item);
                            } }, leftArrow),
                        React.createElement(SideBarTitleText, null, name)))),
                React.createElement(NavLinkList, { key: "NavLinkList" }, linksView)),
            React.createElement(MobileMenuBottomPanel, null,
                React.createElement(BottomLinkView, null),
                React.createElement(FooterLinkView, null))));
    }
}
//# sourceMappingURL=MobileMenuPage.js.map