import React from 'react';
import { productsApi, ProductProvider, LocalLabelsProvider, RenderInjectedContent, useProductInjectedContent, ProductSEO } from '@sentecacommerce-theme/lib';
import { useRouter } from 'next/router';
import { ProductPageComponent } from './Components';
import { ProductPlaceholder } from './Components/ProductPlaceholder';
export var ProductPage = (_ref) => {
  var _data$slug$;

  var {
    labels
  } = _ref;
  var router = useRouter();
  var {
    slug
  } = router.query;
  var {
    data,
    isLoading
  } = productsApi.useProduct(slug, {
    expand: 'categories&brands'
  });
  var content = useProductInjectedContent({
    path: router.asPath
  });

  if (isLoading || (data == null ? void 0 : (_data$slug$ = data.slug[0]) == null ? void 0 : _data$slug$.value) !== slug // page content is not updated on carousel items click
  ) {
      return /*#__PURE__*/React.createElement(ProductPlaceholder, null);
    }

  return /*#__PURE__*/React.createElement(LocalLabelsProvider, {
    labels: labels
  }, /*#__PURE__*/React.createElement(ProductProvider, {
    product: data,
    query: {
      expand: 'brands'
    }
  }, /*#__PURE__*/React.createElement(RenderInjectedContent, {
    componentList: content.before
  }), /*#__PURE__*/React.createElement(ProductSEO, null), /*#__PURE__*/React.createElement(ProductPageComponent, {
    key: slug,
    masterVariantId: data == null ? void 0 : data.masterVariantId,
    contentInside: content.inside,
    categories: data == null ? void 0 : data.categories
  }), /*#__PURE__*/React.createElement(RenderInjectedContent, {
    componentList: content.after
  })));
};
//# sourceMappingURL=productPage.component.js.map