"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.ProductPage = void 0;

var _react = _interopRequireDefault(require("react"));

var _lib = require("@sentecacommerce-theme/lib");

var _router = require("next/router");

var _Components = require("./Components");

var _ProductPlaceholder = require("./Components/ProductPlaceholder");

var ProductPage = function ProductPage(_ref) {
  var _data$slug$;

  var labels = _ref.labels;
  var router = (0, _router.useRouter)();
  var slug = router.query.slug;

  var _productsApi$useProdu = _lib.productsApi.useProduct(slug, {
    expand: 'categories&brands'
  }),
      data = _productsApi$useProdu.data,
      isLoading = _productsApi$useProdu.isLoading;

  var content = (0, _lib.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["default"].createElement(_ProductPlaceholder.ProductPlaceholder, null);
    }

  return /*#__PURE__*/_react["default"].createElement(_lib.LocalLabelsProvider, {
    labels: labels
  }, /*#__PURE__*/_react["default"].createElement(_lib.ProductProvider, {
    product: data,
    query: {
      expand: 'brands'
    }
  }, /*#__PURE__*/_react["default"].createElement(_lib.RenderInjectedContent, {
    componentList: content.before
  }), /*#__PURE__*/_react["default"].createElement(_lib.ProductSEO, null), /*#__PURE__*/_react["default"].createElement(_Components.ProductPageComponent, {
    key: slug,
    masterVariantId: data == null ? void 0 : data.masterVariantId,
    contentInside: content.inside,
    categories: data == null ? void 0 : data.categories
  }), /*#__PURE__*/_react["default"].createElement(_lib.RenderInjectedContent, {
    componentList: content.after
  })));
};

exports.ProductPage = ProductPage;
//# sourceMappingURL=productPage.component.js.map