import * as tslib_1 from "tslib";
/**
 * @todo @file @split
 */
import { isArray } from 'exotic';
import { removeNonAlphabet } from '@skava/utils';
import { observable, action, computed } from 'xmobx/mobx';
//
import { categoryListContainer } from '@skava/packages/core/categories';
const hideRecursive = (item, index) => {
    item.isActive = false;
    if (isArray(item.categories) && item.categories.length > 0) {
        item.categories.forEach(hideRecursive);
    }
};
// == to categories item
const defaultPageHeading = {
    isActive: true,
    image: 'https://raderain.sirv.com/T-Giant/Cat_Undershirts_588x400.png',
    identifier: 'Shop Categories',
    name: 'Shop Categories',
};
class MobileMenuContainer {
    constructor() {
        /**
         * @todo take this defaults out...
         */
        this.pageStack = [
            {
                // may want to use isSelected?
                ...defaultPageHeading,
                categories: [
                    {
                        image: '',
                        identifier: 'loading',
                        isActive: false,
                        name: 'Loading...',
                        categories: [],
                    },
                ],
            },
        ];
        this.currentPage = 0;
        this.updateDestination = (categories) => {
            categories.forEach(item => {
                const { name, identifier } = item;
                item.destination =
                    removeNonAlphabet(name).toLowerCase() === identifier
                        ? `/categoryLanding/${identifier}`
                        : `/category/${identifier}`;
            });
        };
    }
    get isFrontPage() {
        return this.currentPage === 0;
    }
    setupFrontPage(categories = categoryListContainer.categories) {
        console.debug('[menu] setupFrontPage; categories: ' + categories.length);
        // this.pageStack = [...this.pageStack, ...categories]
        if (categories.length > 0) {
            this.currentPage = 0;
            // const frontPageCategories = [
            //   {
            //     image: 'https://raderain.sirv.com/T-Giant/Cat_Undershirts_588x400.png',
            //     identifier: 'Shop Categories',
            //     // destination: '',
            //     isActive: false,
            //     name: 'Shop Categories',
            //   },
            //   ...categories,
            // ]
            this.pageStack = [
                {
                    ...defaultPageHeading,
                    categories,
                },
            ];
        }
        else {
            console.warn('[menu] categories missing');
        }
    }
    // @todo will have issue if it mutates categories direct
    popLastPage() {
        this.pageStack.pop();
    }
    // @name was handleSidebarBack
    goBack(page) {
        console.debug('[menu] goBack');
        this.currentPage -= 1;
        this.setPageAsActive(page.parentPage[0]);
        container.pageStack = page.parentPage;
    }
    setPageAsActive(page) {
        this.pageStack.forEach(hideRecursive);
        page.isActive = true;
    }
    goToPage(page) {
        console.debug('[menu] goToPage');
        console.log(page);
        const { name, categories, destination, image, identifier } = page;
        if (categories.length === 0) {
            // then it's a link?
            console.debug('[menu] clicked a non link');
            return;
        }
        this.currentPage += 1;
        this.setPageAsActive(page);
        if (!this.isFrontPage) {
            this.updateDestination(categories);
            const parentPage = container.pageStack;
            container.pageStack = [
                {
                    image,
                    name,
                    categories: [
                        {
                            name: `Shop All ${name}`,
                            isActive: false,
                            identifier: `shop-all-${name}`,
                            destination: removeNonAlphabet(name).toLowerCase() === identifier
                                ? `/categoryLanding/${identifier}`
                                : `/category/${identifier}`,
                        },
                        ...page.categories,
                    ],
                    isActive: page.isActive,
                    parentPage,
                },
            ];
        }
    }
}
tslib_1.__decorate([
    observable
], MobileMenuContainer.prototype, "pageStack", void 0);
tslib_1.__decorate([
    observable
], MobileMenuContainer.prototype, "currentPage", void 0);
tslib_1.__decorate([
    computed
], MobileMenuContainer.prototype, "isFrontPage", null);
tslib_1.__decorate([
    action
], MobileMenuContainer.prototype, "setupFrontPage", null);
tslib_1.__decorate([
    action.bound
], MobileMenuContainer.prototype, "popLastPage", null);
tslib_1.__decorate([
    action.bound
], MobileMenuContainer.prototype, "goBack", null);
tslib_1.__decorate([
    action
], MobileMenuContainer.prototype, "setPageAsActive", null);
tslib_1.__decorate([
    action
], MobileMenuContainer.prototype, "goToPage", null);
const container = new MobileMenuContainer();
export { MobileMenuContainer, container };
//# sourceMappingURL=container.js.map