import * as tslib_1 from "tslib";
// tslint:disable
import * as React from 'react';
//
import { observer } from 'xmobx/mobx-react';
//
import { CatalogHelmet, 
//
ProductContextLite, ProductBlockProvider, 
//
ProductListProvider, CatalogLiteContext, StyledProductListBreadCrumbList, StyledProductListMain, StyledRefine, StyledPageProducts, StyledPromotionBlockLite, MerchProductList, StyledCaption, StyledProductBlockWrapLite, StyledProductExpandableBlockLite, StyledProductDescriptionLite, StyledProductBlockBoxLite, ProductNameWithLinkLite, ProductPriceLite, ProductPromotionsLite, ProductBlockContainer, ProductImageGroupLite, 
//
fromVariantToStyleProps, } from '@skava/packages/pages/MerchProductList';
import { ProductOptionsListLite, ProductButtonGroupLite } from '@skava/packages/pages/Product';
let CustomProductBlockItem = class CustomProductBlockItem extends React.Component {
    constructor() {
        super(...arguments);
        this.observableState = new ProductBlockContainer();
    }
    render() {
        const { variant, identifier, description } = this.context.product;
        const wrapProps = fromVariantToStyleProps(variant);
        return (React.createElement(StyledProductBlockWrapLite, Object.assign({}, wrapProps, { id: identifier, onMouseEnter: this.observableState.handleMouseEnter, onMouseLeave: this.observableState.handleMouseLeave }),
            React.createElement(StyledProductBlockBoxLite, { key: "figure" },
                React.createElement("h1", null, "hi"),
                React.createElement(ProductImageGroupLite, { key: "images" }),
                React.createElement(StyledCaption, { key: "caption" },
                    React.createElement(ProductNameWithLinkLite, { key: "name" }),
                    React.createElement(StyledProductDescriptionLite, { key: "description" }, description),
                    React.createElement(ProductPriceLite, { key: "price" }),
                    React.createElement(ProductPromotionsLite, { key: "promo" }))),
            React.createElement(StyledProductExpandableBlockLite, { isVisible: this.observableState.isHovered, key: "expandable" },
                this.observableState.isHovered && React.createElement(ProductOptionsListLite, { key: "options" }),
                this.observableState.isHovered && React.createElement(ProductButtonGroupLite, { key: "actions" }))));
    }
};
CustomProductBlockItem.contextType = ProductContextLite;
CustomProductBlockItem = tslib_1.__decorate([
    observer
], CustomProductBlockItem);
function renderProduct(product, index) {
    return (React.createElement(ProductBlockProvider, { key: product.identifier, product: product, index: index },
        React.createElement(CustomProductBlockItem, null)));
}
export class CustomMerchTemplate extends React.PureComponent {
    render() {
        return (React.createElement(React.Fragment, null,
            React.createElement(StyledProductListBreadCrumbList, { key: "breadCrumbList" }),
            React.createElement(StyledProductListMain, { className: "catalog", key: "plp" },
                React.createElement(StyledRefine, null),
                React.createElement(StyledPageProducts, null,
                    React.createElement(StyledPromotionBlockLite, null),
                    React.createElement(MerchProductList, { renderProduct: renderProduct })))));
    }
}
CustomMerchTemplate.contextType = CatalogLiteContext;
class ProductListPage extends React.PureComponent {
    render() {
        return (React.createElement(ProductListProvider, null,
            React.createElement(CatalogHelmet, { key: "schema" }),
            React.createElement(CustomMerchTemplate, { key: "template" })));
    }
}
export { ProductListPage };
export default ProductListPage;
//# sourceMappingURL=CustomProductList.js.map