"use strict";

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

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

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

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

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

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

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;

var AvailabilityPerStore = function AvailabilityPerStore(_ref) {
  var onClose = _ref.onClose,
      renderVariantSelector = _ref.renderVariantSelector,
      isSizeSelected = _ref.isSizeSelected;

  var _useProductState = (0, _lib.useProductState)(),
      selectedVariant = _useProductState.selectedVariant;

  var stores = selectedVariant == null ? void 0 : selectedVariant.getAvailabilityByStore();
  var labels = (0, _lib.useLocalLabels)();

  var processQuantity = function processQuantity(val) {
    if (val > 2) return 0;
    if (val <= 2 && val > 0) return 1;
    return 2;
  };

  var availableInfo = {
    0: labels.inStock,
    1: labels.limited,
    2: labels.unavailable
  };
  return /*#__PURE__*/_react["default"].createElement(_Common.AnimatedModal, {
    isRoot: true,
    title: "Availability by store",
    onClose: onClose,
    bottom: function bottom(_ref2) {
      var closeModal = _ref2.closeModal;
      return /*#__PURE__*/_react["default"].createElement(ButtonsContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.Button, {
        onClick: closeModal,
        bordered: true
      }, labels.close));
    }
  }, /*#__PURE__*/_react["default"].createElement(Container, {
    isStore: false
  }, renderVariantSelector()), isSizeSelected ? stores == null ? void 0 : stores.map(function (element) {
    var availability = processQuantity(element.availableQuantity);
    return /*#__PURE__*/_react["default"].createElement(Container, {
      isStore: true,
      key: "Store__" + element.storeName
    }, /*#__PURE__*/_react["default"].createElement(StoreContainer, null, /*#__PURE__*/_react["default"].createElement(StoreWrapper, {
      isUpper: true
    }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(StoreName, null, element.storeName))), /*#__PURE__*/_react["default"].createElement(StoreWrapper, null, /*#__PURE__*/_react["default"].createElement(AvailabilityContainer, null, /*#__PURE__*/_react["default"].createElement(StockSpan, {
      inStock: availability === 0,
      limitedQuantity: availability === 1,
      outOfStock: availability === 2
    }), /*#__PURE__*/_react["default"].createElement(StockSpanLabel, null, availableInfo[availability])))));
  }) : /*#__PURE__*/_react["default"].createElement(SelectPrompt, null, labels.selectSize));
};

exports.AvailabilityPerStore = AvailabilityPerStore;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  background-color: #fff;\n  padding: ", ";\n"])), function (props) {
  return props.isStore ? '0rem 3rem' : '3rem 3rem 3rem';
});

var StoreContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  padding-bottom: 1.25rem;\n  padding-top: 1.25rem;\n  border-bottom: 1px solid #dfdfdf;\n"])));

var StoreWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  justify-content: space-between;\n  display: flex;\n  width: 100%;\n  ", "\n"])), function (props) {
  return props.isUpper && "\n  align-items: center;\n  margin-bottom: 0.25rem;\n  ";
});

var StoreName = _styledComponents["default"].p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: #111;\n  font-size: 1.7rem;\n  line-height: 1.5rem;\n"])));

var AvailabilityContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n"])));

var StockSpan = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 0.7rem;\n  height: 0.7rem;\n  display: inline-flex;\n  border-radius: 50%;\n  margin-top: 0.5625rem;\n  color: #111;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (props) {
  return props.inStock && "\n  background-color: #0a8a00;\n  ";
}, function (props) {
  return props.limitedQuantity && "\n  background-color: #ffa500;\n  ";
}, function (props) {
  return props.outOfStock && "\n  background-color: #ff0000\n  ";
});

var StockSpanLabel = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  padding: 1px 5px 0;\n  font-size: 1rem;\n"])));

var SelectPrompt = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-align: center;\n  font-size: 1.8rem;\n"])));

var ButtonsContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-between'
})(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & > button {\n    width: 100%;\n    padding: 0 0.8rem !important;\n  }\n"])));
//# sourceMappingURL=index.js.map