"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

var _UI = require("../../../UI");

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

var CheckoutPickupFromStore = function CheckoutPickupFromStore() {
  var _selectedStore$addres;

  var _useState = (0, _react.useState)(),
      selectedStoreIndex = _useState[0],
      setSelectedStoreIndex = _useState[1];

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

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

  var _useCheckoutErrorFiel = (0, _lib.useCheckoutErrorFields)(),
      errorRef = _useCheckoutErrorFiel.errorRef;

  var _useCheckoutFormShipp = (0, _lib.useCheckoutFormShippingState)(),
      errors = _useCheckoutFormShipp.errors;

  var labels = (0, _lib.useLocalLabels)();
  var selectedStore = availableStores && selectedStoreIndex !== undefined ? availableStores[selectedStoreIndex] : availableStores == null ? void 0 : availableStores.find(function (store) {
    return store.isSelected;
  });
  var hasSelectedStore = Boolean(selectedStore);
  (0, _react.useEffect)(function () {
    setSelectedStoreIndex(availableStores == null ? void 0 : availableStores.findIndex(function (store) {
      return store.isSelected;
    }));
  }, [availableStores]);

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

  var openModal = function openModal() {
    enqueueView(views.storePickUp, {
      selectedStore: selectedStoreIndex
    });
  };

  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_UI.CheckoutTitle, {
    data: labels.selectStore
  }), hasSelectedStore && /*#__PURE__*/_react["default"].createElement(SelectedStoreContainer, null, /*#__PURE__*/_react["default"].createElement(ContainerWrapper, {
    noPadding: true
  }, /*#__PURE__*/_react["default"].createElement(_Common.IconStore, {
    style: {
      width: '2rem'
    },
    className: "mr-2"
  }), /*#__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, selectedStore == null ? void 0 : selectedStore.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, selectedStore == null ? void 0 : (_selectedStore$addres = selectedStore.address) == null ? void 0 : _selectedStore$addres.additionalAddressInfo)))))), /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
    hasSelectedStore: hasSelectedStore
  }, /*#__PURE__*/_react["default"].createElement(_Common.Button, {
    onClick: openModal,
    icon: !hasSelectedStore ? /*#__PURE__*/_react["default"].createElement(_Common.IconStore, null) : undefined,
    iconPosition: "right",
    small: hasSelectedStore,
    variant: "primary",
    bordered: hasSelectedStore,
    type: "button"
  }, hasSelectedStore ? labels.changeStoreButtonLabel : labels.selectStoreButtonLabel)), /*#__PURE__*/_react["default"].createElement(_Common.FormError, {
    errorRef: errorRef,
    errors: errors,
    fieldName: "pickupFromStore"
  }));
};

exports.CheckoutPickupFromStore = CheckoutPickupFromStore;

var SelectedStoreContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Container = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var ButtonContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & > button {\n    width: ", ";\n  }\n"])), function (props) {
  return props.hasSelectedStore ? 'auto' : '24rem';
});

var ButtonsContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-between'
})(_templateObject4 || (_templateObject4 = (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'
})(_templateObject5 || (_templateObject5 = (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 (_ref) {
  var theme = _ref.theme;
  return theme.palette.primary;
}, function (props) {
  return props.isSelected ? props.theme.palette.primary : props.theme.palette.secondary;
});

var ContainerWrapper = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-start justify-content-start'
})(_templateObject6 || (_templateObject6 = (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 (_ref2) {
  var theme = _ref2.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 StoreContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n"])));

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

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

var StockSpan = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (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 (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.primary;
}, function (props) {
  return props.inStock && "\n  background-color: #0a8a00;\n  ";
});

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