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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

import React from 'react';
import styled from 'styled-components';
import { useRouter } from 'next/router';
import { useStoresContext } from '../../stores.context';
import { Typography } from '../../../Common';
import { useStrings, useConfigState } from '@sentecacommerce-theme/lib';
import { useWindowDimensions } from '@sentecacommerce-theme/lib';
import { getClosesAt } from '../../utils';
export var Store = (_ref) => {
  var {
    store
  } = _ref;
  var labels = useStrings('stores');
  var router = useRouter();
  var {
    filterByStoreName,
    selectedStore
  } = useStoresContext();
  var {
    theme
  } = useConfigState();
  var {
    width
  } = useWindowDimensions();
  var desktopWidth = parseInt(theme.breakpoints.lg.min.split('px')[0]);

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

  var closesAt = getClosesAt(store.workHours);
  return /*#__PURE__*/React.createElement(StoreContainer, {
    isSelected: selectedStore === store.name,
    onClick: handleClick(store)
  }, /*#__PURE__*/React.createElement(StoreTitle, null, store.name), /*#__PURE__*/React.createElement(Info, null, /*#__PURE__*/React.createElement(Label, null, store.shortAddress || store.fullAddress)), /*#__PURE__*/React.createElement(ClosesAtLabel, null, labels.closesAtLabel, " ", closesAt));
};
var StoreContainer = styled.article(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  padding: 2rem;\n"])), props => props.isSelected ? '#f6f6f6' : 'transparent');
var StoreTitle = styled(Typography).attrs({
  as: 'h2',
  variant: 6
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  font-weight: normal;\n  line-height: 1.2;\n"])));
var Info = styled.div.attrs({
  className: 'd-flex'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  max-width: 40rem;\n"])));
var Label = styled(Typography).attrs({
  as: 'p',
  variant: 6
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  & > a {\n    color: ", ";\n    &:hover {\n      opacity: 0.6;\n    }\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
});
var ClosesAtLabel = styled(Typography).attrs({
  as: 'p',
  className: 'mt-1'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 1.4rem;\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.hint;
});
//# sourceMappingURL=index.js.map