import * as React from 'react';
import { styled } from 'styleh-components';
import BreadCrumb from '@skava/packages/features/BreadCrumbs';
import { ProductDetailPage, 
// === ===
StyledProductDescriptionLite, StyledProductSpecificationsLite, StyledProductReviewsSection, StyledObservableProductDetailColumn, 
// === ===
NotFound, ProductContextLite, 
// ...
ProductContext, 
// === deps ===
updateRoutingFromSkuSelection, toProductDetailVariables, isEmptyProduct, scrollToTop, addToRecentlyViewed, 
// === ===
state, 
// === sections ===
ProductPromotionLite, ProductAboutLite, ProductQuantityLite, LinkedProducts, ProductButtonGroupLite, StyledProductDetailWrap, ProductNameWrap, BrandName, StyledProductName, ProductButtonsWrap, StyledPriceDom, StyledSocialShare, StyledHorizontalLine, ProductNameWrapMobile, 
// === ImageGallery ===
ImageGallery, ProductDetailSchema, BundleCollectionProductsLite, 
// ===
LinkedProductsProvider, } from '@skava/packages/pages/Product';
const StyledProductDetailPage = styled(ProductDetailPage) ``;
class StyledBloatedProductDetailPage extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.handleSelectOption = async (args) => {
            updateRoutingFromSkuSelection(args);
            const variables = toProductDetailVariables({ shouldForceFetch: true });
            this.context.refetch(variables);
        };
    }
    componentDidMount() {
        scrollToTop();
        addToRecentlyViewed();
    }
    render() {
        const { className } = this.props;
        const { item } = this.context;
        const { images, name, isCollection, breadCrumbList, brand, currentlySelectedSkuId } = item;
        if (!name) {
            return isEmptyProduct(this.context.item) ? React.createElement(NotFound, null) : '';
        }
        const isCollectionOrBundle = false;
        const onSelectOption = this.handleSelectOption;
        return (React.createElement(ProductContextLite.Provider, { value: item },
            React.createElement(BreadCrumb, { list: breadCrumbList || undefined, key: "breadcrumbs" }),
            React.createElement(ProductDetailSchema, { key: "schema" }),
            React.createElement(StyledProductDetailWrap, { key: "grid", className: className },
                React.createElement(React.Fragment, null,
                    React.createElement(ProductNameWrapMobile, null,
                        React.createElement(BrandName, null, brand),
                        React.createElement(StyledProductName, null, name))),
                React.createElement(StyledObservableProductDetailColumn, { key: "RightSection" },
                    React.createElement(ProductNameWrap, { key: "name" },
                        React.createElement(BrandName, null, brand),
                        React.createElement(StyledProductName, null, name)),
                    React.createElement(StyledPriceDom, { key: "price" }),
                    React.createElement(ProductPromotionLite, { key: "promotions" }),
                    React.createElement(ProductAboutLite, { key: "about" }),
                    !isCollection && (React.createElement(React.Fragment, null,
                        React.createElement(ProductButtonsWrap, { key: "buttons" },
                            React.createElement(ProductQuantityLite, null),
                            React.createElement(ProductButtonGroupLite, null),
                            React.createElement(StyledHorizontalLine, null)))),
                    React.createElement(StyledSocialShare, { key: "share" })),
                React.createElement(ImageGallery, { key: "images", images: images, enableZoom: state.enableZoom }),
                !isCollectionOrBundle && (React.createElement(React.Fragment, null,
                    React.createElement(StyledProductDescriptionLite, { key: "description" }),
                    React.createElement(StyledProductSpecificationsLite, { key: "specification" }),
                    React.createElement(StyledProductReviewsSection, { key: "reviews" }))),
                isCollectionOrBundle && React.createElement(BundleCollectionProductsLite, { key: "bundle-only" }),
                React.createElement(LinkedProductsProvider, null,
                    React.createElement(LinkedProducts, null)))));
    }
}
StyledBloatedProductDetailPage.contextType = ProductContext;
export default class CustomProductPage extends React.PureComponent {
    render() {
        return (React.createElement(StyledProductDetailPage, null,
            React.createElement(StyledBloatedProductDetailPage, null)));
    }
}
//# sourceMappingURL=CustomProductPage.js.map