"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

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

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

var _Product = require("../../../Basket/Components/ProductsList/Components/Product");

var _Common = require("../../../Common");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var BasketItemsWithErrorsModal = function BasketItemsWithErrorsModal() {
  var _useBasketItemWithErr = (0, _lib.useBasketItemWithErrorList)(),
      data = _useBasketItemWithErr.data;

  var _useState = (0, _react.useState)(false),
      showSpinner = _useState[0],
      setShowSpinner = _useState[1];

  var _useState2 = (0, _react.useState)(false),
      hasErrors = _useState2[0],
      setHasErrors = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      canClose = _useState3[0],
      setCanClose = _useState3[1];

  var router = (0, _router.useRouter)();

  var _useLocalLabels = (0, _lib.useLocalLabels)(),
      outOfStock = _useLocalLabels.outOfStock;

  (0, _react.useEffect)(function () {
    if (!hasErrors && data != null && data.length) {
      setHasErrors(true);
      return;
    }

    if (!(data != null && data.length)) {
      setCanClose(true);
    }
  }, [data, hasErrors]);

  var close = function close() {
    if ((data == null ? void 0 : data.length) <= 1) {
      setShowSpinner(true);
      router.push('/');
    }
  };

  if (!hasErrors) return null;
  return /*#__PURE__*/_react["default"].createElement(_lib.Portal, null, /*#__PURE__*/_react["default"].createElement(Background, null, !showSpinner ? /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_Common.ScrollView, {
    maxHeight: "100%"
  }, /*#__PURE__*/_react["default"].createElement(ItemsContainer, {
    canClose: canClose
  }, /*#__PURE__*/_react["default"].createElement(Title, null, outOfStock), /*#__PURE__*/_react["default"].createElement("div", {
    className: "row g-4"
  }, data == null ? void 0 : data.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement("article", {
      key: "Product__" + (item == null ? void 0 : item._id),
      className: "col-12 px-3"
    }, /*#__PURE__*/_react["default"].createElement(_Product.Product, {
      close: close,
      key: index,
      item: item
    }));
  }))))) : /*#__PURE__*/_react["default"].createElement(LoaderContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.Spinner, null))), /*#__PURE__*/_react["default"].createElement(_lib.OverflowHidden, null));
};

exports.BasketItemsWithErrorsModal = BasketItemsWithErrorsModal;

var LoaderContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 28rem;\n  position: relative;\n"])));

var Container = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  --padding: 1.5rem;\n  max-width: 110rem;\n  width: 100%;\n  height: 100%;\n  background: ", ";\n  padding: var(--padding) 0 var(--padding) var(--padding);\n  position: relative;\n\n  @media (min-width: ", ") {\n    --padding: 3rem;\n  }\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.palette.whiteSmoke;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.md.min;
});

var Title = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'p',
  variant: 4,
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-align: center;\n  color: ", ";\n  background-color: ", ";\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.whiteSmoke;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.primary;
});

var ItemsContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  padding-right: var(--padding);\n  padding-bottom: ", ";\n"])), function (props) {
  return props.canClose ? '8rem' : 0;
});

var Background = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding: 2rem;\n  background: rgba(0, 0, 0, 0.3);\n"])));
//# sourceMappingURL=index.js.map