"use strict";

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

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

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

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

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

var _router = require("next/router");

var _stores = require("../../stores.context");

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

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

var _utils = require("../../utils");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var Store = function Store(_ref) {
  var store = _ref.store;
  var labels = (0, _lib.useStrings)('stores');
  var router = (0, _router.useRouter)();

  var _useStoresContext = (0, _stores.useStoresContext)(),
      filterByStoreName = _useStoresContext.filterByStoreName,
      selectedStore = _useStoresContext.selectedStore;

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

  var _useWindowDimensions = (0, _lib.useWindowDimensions)(),
      width = _useWindowDimensions.width;

  var desktopWidth = parseInt(theme.breakpoints.lg.min.split('px')[0]);

  var handleClick = function handleClick(store) {
    return function () {
      if (width >= desktopWidth) {
        filterByStoreName(store.name);
      } else {
        router.push(router.pathname + '/' + store.slug);
      }
    };
  };

  var closesAt = (0, _utils.getClosesAt)(store.workHours);
  return /*#__PURE__*/_react["default"].createElement(StoreContainer, {
    isSelected: selectedStore === store.name,
    onClick: handleClick(store)
  }, /*#__PURE__*/_react["default"].createElement(StoreTitle, null, store.name), /*#__PURE__*/_react["default"].createElement(Info, null, /*#__PURE__*/_react["default"].createElement(Label, null, store.shortAddress || store.fullAddress)), /*#__PURE__*/_react["default"].createElement(ClosesAtLabel, null, labels.closesAtLabel, " ", closesAt));
};

exports.Store = Store;

var StoreContainer = _styledComponents["default"].article(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  background: ", ";\n  padding: 2rem;\n"])), function (props) {
  return props.isSelected ? '#f6f6f6' : 'transparent';
});

var StoreTitle = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'h2',
  variant: 6
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-weight: normal;\n  line-height: 1.2;\n"])));

var Info = _styledComponents["default"].div.attrs({
  className: 'd-flex'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 40rem;\n"])));

var Label = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'p',
  variant: 6
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & > a {\n    color: ", ";\n    &:hover {\n      opacity: 0.6;\n    }\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
});
var ClosesAtLabel = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'p',
  className: 'mt-1'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  font-size: 1.4rem;\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.hint;
});
//# sourceMappingURL=index.js.map