import * as tslib_1 from "tslib";
import React from 'react';
import Helmet from 'react-helmet';
import { Query } from 'react-apollo';
import { oneRouter } from '@skava/router';
import { observer } from 'xmobx/mobx-react';
import { studioContainer } from './state';
import { fromCellListToIndexedWithLabelValueIndexed, HomePageQuery as HomePage, MarketingPageQuery as MarketingPage, } from './state';
import { renderStudioWidget } from './renderProps';
import { StyledMain, StyledCell, PreloaderContainer } from './styled';
import { Preloader } from '@skava/ui';
import { toVariables, fromResponseToData } from './deps';
import { StudioContext } from './Context';
import { StudioMeta } from './StudioMeta';
function isForbiddenWidgetName(widget) {
    const hoverSupportForbiddenWidgetList = ['PageBackground'];
    const shouldBeTopOnHover = hoverSupportForbiddenWidgetList.includes(widget.componentName) === false;
    return shouldBeTopOnHover;
}
/**
 * @todo convert to smaller & use context
 */
function renderStudio(response) {
    const data = fromResponseToData(response);
    console.log({ data });
    const isMissingData = !data || !data.gridLayout || !data.gridLayout.cells;
    if (isMissingData) {
        return (React.createElement(PreloaderContainer, null,
            React.createElement(Preloader, { breedType: "preloader" })));
        // return <Placeholder title="loading" />
    }
    const renderCell = (item, index) => {
        /**
         * @todo @fixme @@perf @@demo
         */
        const indexed = fromCellListToIndexedWithLabelValueIndexed(JSON.parse(JSON.stringify(data.views)));
        const widgetGridOrder = indexed[item.cellId];
        console.log('rendering item', widgetGridOrder);
        const component = {
            widget: widgetGridOrder,
            gridColumn: item.properties.columns,
            componentColumn: data.gridLayout.properties.columns,
        };
        const view = component && renderStudioWidget(component.widget);
        const shouldBeTopOnHover = isForbiddenWidgetName(component.widget);
        return (React.createElement(StyledCell, { key: item.cellId + index, shouldBeTopOnHover: shouldBeTopOnHover, colSpan: component.gridColumn, totalColumns: component.componentColumn }, view));
    };
    return (React.createElement(StudioContext.Provider, { value: data },
        React.createElement(StudioMeta, null),
        data.gridLayout.cells.map(renderCell)));
}
let Studio = class Studio extends React.Component {
    /**
     * @note
     * this code required when we clicking on the preview mode in studio
     * since that wont call the Fallback component so hasPage call wont be triggered
     */
    async componentWillMount() {
        const hasPage = await studioContainer.hasPage();
        if (hasPage) {
            studioContainer.fetchPageIfNeeded();
        }
    }
    render() {
        // on preview, no cache, otherwise, cache
        const fetchPolicy = oneRouter.get('preview') ? 'network-only' : 'cache-first';
        const { className, pageName } = this.props;
        const { isHome, params } = toVariables();
        const FinalQuery = isHome ? HomePage : MarketingPage;
        console.log({ isHome });
        return (React.createElement(StyledMain, { className: className, key: "main" },
            React.createElement(Helmet, { key: "helmet" },
                React.createElement("title", null,
                    "SkavaSTORE | ",
                    `${pageName}`)),
            React.createElement(Query, { query: FinalQuery, variables: params, fetchPolicy: fetchPolicy, key: "query" }, renderStudio)));
    }
};
Studio.defaultProps = {
    className: 'home',
    pageName: 'studio-home',
};
Studio = tslib_1.__decorate([
    observer
], Studio);
export default Studio;
export { Studio };
//# sourceMappingURL=Studio.js.map