"use strict";

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

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

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

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

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

var _ = require("../../");

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

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

var PickUpFromStore = function PickUpFromStore(_ref) {
  var selectedStore = _ref.selectedStore;

  var _React$useState = _react["default"].useState(),
      selectedStoreIndex = _React$useState[0],
      setSelectedStoreIndex = _React$useState[1];

  var _useCheckoutPickupFro = (0, _lib.useCheckoutPickupFromStore)(),
      availableStores = _useCheckoutPickupFro.availableStores;

  var onApplyClick = function onApplyClick(close) {
    var _availableStores$sele;

    selectedStoreIndex !== undefined && (availableStores == null ? void 0 : (_availableStores$sele = availableStores[selectedStoreIndex]) == null ? void 0 : _availableStores$sele.selectStore());
    close();
  };

  var labels = (0, _lib.useStrings)('checkout');

  var _useGlobalLabels = (0, _lib.useGlobalLabels)(),
      buttons = _useGlobalLabels.buttons;

  var handleStoreClick = function handleStoreClick(index) {
    return function () {
      var _availableStores$inde;

      setSelectedStoreIndex(index);
      availableStores == null ? void 0 : (_availableStores$inde = availableStores[index]) == null ? void 0 : _availableStores$inde.selectStore();
      closeModal();
    };
  };

  var _useUIFunctions = (0, _lib.useUIFunctions)(),
      closeViewById = _useUIFunctions.closeViewById;

  var _useConfigState = (0, _lib.useConfigState)(),
      views = _useConfigState.views;

  var closeModal = function closeModal() {
    setSelectedStoreIndex(undefined);
    closeViewById(views.storePickUp);
  };

  return /*#__PURE__*/_react["default"].createElement(_.AnimatedModal, {
    isRoot: true,
    onClose: closeModal,
    title: labels.selectStore,
    bottom: function bottom(data) {
      return /*#__PURE__*/_react["default"].createElement(ButtonsContainer, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
        type: "button",
        bordered: true,
        onClick: data.closeModal
      }, labels.cancelLabel), /*#__PURE__*/_react["default"].createElement(_.Button, {
        type: "button",
        onClick: function onClick() {
          return onApplyClick(data.closeModal);
        }
      }, buttons.apply));
    }
  }, availableStores == null ? void 0 : availableStores.map(function (store, i) {
    var _ref2 = store,
        address = _ref2.address,
        name = _ref2.name;
    var isSelected = selectedStore === i;
    return /*#__PURE__*/_react["default"].createElement(ContainerWrapper, {
      isSelected: isSelected,
      onClick: handleStoreClick(i),
      tabIndex: 0,
      key: store._id
    }, /*#__PURE__*/_react["default"].createElement(Radio, {
      isSelected: isSelected
    }), /*#__PURE__*/_react["default"].createElement(StoreContainer, null, /*#__PURE__*/_react["default"].createElement(StoreWrapper, {
      isUpper: true
    }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(StoreName, {
      isSelected: isSelected
    }, name))), /*#__PURE__*/_react["default"].createElement(StoreWrapper, null, /*#__PURE__*/_react["default"].createElement(AvailabilityContainer, null, /*#__PURE__*/_react["default"].createElement(StockSpan, {
      inStock: true
    }), /*#__PURE__*/_react["default"].createElement(StockSpanLabel, null, address.additionalAddressInfo)))));
  }));
};

exports.PickUpFromStore = PickUpFromStore;

var ButtonsContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-between'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & > button:first-child {\n    width: calc(37% - 0.6rem);\n    padding: 0 0.8rem !important;\n  }\n\n  & > button:last-child {\n    width: calc(63% - 0.6rem);\n    padding: 0 0.8rem !important;\n  }\n"])));

var Radio = _styledComponents["default"].div.attrs({
  className: 'mr-3 mt-1 d-flex align-items-center justify-content-center'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-width: 1.4rem;\n  max-width: 1.4rem;\n  height: 1.4rem;\n  border: 0.1rem solid ", ";\n  border-radius: 50%;\n\n  &:after {\n    content: '';\n    display: block;\n    width: 0.8rem;\n    height: 0.8rem;\n    background-color: ", ";\n    border-radius: 50%;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.primary;
}, function (props) {
  return props.isSelected ? props.theme.palette.primary : props.theme.palette.secondary;
});

var StoreContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n"])));

var ContainerWrapper = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-start justify-content-start'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  background-color: ", ";\n  padding: ", ";\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:focus,\n    &:hover {\n      opacity: ", ";\n    }\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.secondary;
}, function (props) {
  return props.noPadding ? '1.25rem 0' : '1.25rem 3rem';
}, function (props) {
  return props.isSelected ? 1 : 0.6;
});

var StoreWrapper = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (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(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  font-size: 1.7rem;\n  line-height: 1.5rem;\n  font-weight: ", ";\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.primary;
}, function (props) {
  return props.isSelected ? 'bold' : '400';
});

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

var StockSpan = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-width: 0.7rem;\n  min-height: 0.7rem;\n  display: inline-flex;\n  border-radius: 50%;\n  margin-top: 0.5625rem;\n  color: ", ";\n\n  ", "\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.primary;
}, function (props) {
  return props.inStock && "\n  background-color: #0a8a00;\n  ";
});

var StockSpanLabel = _styledComponents["default"].span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  padding: 0.1rem 0.5rem 0;\n  font-size: 1rem;\n"])));
//# sourceMappingURL=index.js.map