import React from 'react';
import { Modal } from '../../../Common';
import { Products, Restock } from './Components';
export var ErrorModal = (_ref) => {
  var {
    onClose,
    open,
    products,
    setProducts
  } = _ref;
  var [page, setPage] = React.useState('Products');
  var [variant, setVariant] = React.useState(); // rerender modal when products change

  var [, _update] = React.useReducer(x => x + 1, 0);
  var contentMap = {
    Products: /*#__PURE__*/React.createElement(Products, {
      products: products,
      setRestock: () => setPage('Restock'),
      setVariant: setVariant,
      setProducts: setProducts,
      variant: variant,
      update: () => _update()
    }),
    Restock: /*#__PURE__*/React.createElement(Restock, {
      backToProducts: () => setPage('Products'),
      variant: variant,
      setProducts: setProducts,
      products: products
    })
  };
  var titleMap = {
    Products: 'Items out of stock',
    Restock: 'Notify me when the product is available'
  };
  React.useEffect(() => {
    if (products && products.length < 1) {
      onClose();
    }
  }, [products, products == null ? void 0 : products.length, onClose]);
  return /*#__PURE__*/React.createElement(Modal, {
    open: open,
    handleClose: onClose,
    title: titleMap[page]
  }, /*#__PURE__*/React.createElement(React.Fragment, null, contentMap[page]));
};
//# sourceMappingURL=index.js.map