import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { useRouter } from 'next/router';
import { Portal, useBasketItemWithErrorList, OverflowHidden, useLocalLabels } from '@sentecacommerce-theme/lib';
import { Product } from '../../../Basket/Components/ProductsList/Components/Product';
import { Spinner, ScrollView, Typography } from '../../../Common';
export var BasketItemsWithErrorsModal = () => {
  var {
    data
  } = useBasketItemWithErrorList();
  var [showSpinner, setShowSpinner] = useState(false);
  var [hasErrors, setHasErrors] = useState(false);
  var [canClose, setCanClose] = useState(false);
  var router = useRouter();
  var {
    outOfStock
  } = useLocalLabels();
  useEffect(() => {
    if (!hasErrors && data != null && data.length) {
      setHasErrors(true);
      return;
    }

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

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

  if (!hasErrors) return null;
  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Background, null, !showSpinner ? /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ScrollView, {
    maxHeight: "100%"
  }, /*#__PURE__*/React.createElement(ItemsContainer, {
    canClose: canClose
  }, /*#__PURE__*/React.createElement(Title, null, outOfStock), /*#__PURE__*/React.createElement("div", {
    className: "row g-4"
  }, data == null ? void 0 : data.map((item, index) => /*#__PURE__*/React.createElement("article", {
    key: "Product__" + (item == null ? void 0 : item._id),
    className: "col-12 px-3"
  }, /*#__PURE__*/React.createElement(Product, {
    close: close,
    key: index,
    item: item
  }))))))) : /*#__PURE__*/React.createElement(LoaderContainer, null, /*#__PURE__*/React.createElement(Spinner, null))), /*#__PURE__*/React.createElement(OverflowHidden, null));
};
var LoaderContainer = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  height: 28rem;\n  position: relative;\n"])));
var Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref) => {
  var {
    theme
  } = _ref;
  return theme.palette.whiteSmoke;
}, (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.min;
});
var Title = styled(Typography).attrs({
  as: 'p',
  variant: 4,
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  color: ", ";\n  background-color: ", ";\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.whiteSmoke;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
});
var ItemsContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  padding-right: var(--padding);\n  padding-bottom: ", ";\n"])), props => props.canClose ? '8rem' : 0);
var Background = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\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