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

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

import React from 'react';
import { useProductState, useLocalLabels } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { AnimatedModal, Button } from '../../../Common';
export var AvailabilityPerStore = (_ref) => {
  var {
    onClose,
    renderVariantSelector,
    isSizeSelected
  } = _ref;
  var {
    selectedVariant
  } = useProductState();
  var stores = selectedVariant == null ? void 0 : selectedVariant.getAvailabilityByStore();
  var labels = useLocalLabels();

  var 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.createElement(AnimatedModal, {
    isRoot: true,
    title: "Availability by store",
    onClose: onClose,
    bottom: (_ref2) => {
      var {
        closeModal
      } = _ref2;
      return /*#__PURE__*/React.createElement(ButtonsContainer, null, /*#__PURE__*/React.createElement(Button, {
        onClick: closeModal,
        bordered: true
      }, labels.close));
    }
  }, /*#__PURE__*/React.createElement(Container, {
    isStore: false
  }, renderVariantSelector()), isSizeSelected ? stores == null ? void 0 : stores.map(element => {
    var availability = processQuantity(element.availableQuantity);
    return /*#__PURE__*/React.createElement(Container, {
      isStore: true,
      key: "Store__" + element.storeName
    }, /*#__PURE__*/React.createElement(StoreContainer, null, /*#__PURE__*/React.createElement(StoreWrapper, {
      isUpper: true
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(StoreName, null, element.storeName))), /*#__PURE__*/React.createElement(StoreWrapper, null, /*#__PURE__*/React.createElement(AvailabilityContainer, null, /*#__PURE__*/React.createElement(StockSpan, {
      inStock: availability === 0,
      limitedQuantity: availability === 1,
      outOfStock: availability === 2
    }), /*#__PURE__*/React.createElement(StockSpanLabel, null, availableInfo[availability])))));
  }) : /*#__PURE__*/React.createElement(SelectPrompt, null, labels.selectSize));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: #fff;\n  padding: ", ";\n"])), props => props.isStore ? '0rem 3rem' : '3rem 3rem 3rem');
var StoreContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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 = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  justify-content: space-between;\n  display: flex;\n  width: 100%;\n  ", "\n"])), props => props.isUpper && "\n  align-items: center;\n  margin-bottom: 0.25rem;\n  ");
var StoreName = styled.p(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  color: #111;\n  font-size: 1.7rem;\n  line-height: 1.5rem;\n"])));
var AvailabilityContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n"])));
var StockSpan = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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"])), props => props.inStock && "\n  background-color: #0a8a00;\n  ", props => props.limitedQuantity && "\n  background-color: #ffa500;\n  ", props => props.outOfStock && "\n  background-color: #ff0000\n  ");
var StockSpanLabel = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  padding: 1px 5px 0;\n  font-size: 1rem;\n"])));
var SelectPrompt = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 1.8rem;\n"])));
var ButtonsContainer = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-between'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  & > button {\n    width: 100%;\n    padding: 0 0.8rem !important;\n  }\n"])));
//# sourceMappingURL=index.js.map