"use strict";

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

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

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

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

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

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

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

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

var _Components = require("./Components");

var _CitySelector = require("./Components/CitySelector");

var _Tabs = require("./Components/Tabs");

var _dynamic = _interopRequireDefault(require("next/dynamic"));

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

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

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

var StoresMap = (0, _dynamic["default"])(function () {
  return Promise.resolve().then(function () {
    return (0, _interopRequireWildcard2["default"])(require('./Components/StoresMap'));
  }).then(function (mod) {
    return mod.StoresMap;
  });
}, {
  ssr: false
});

var Stores = function Stores(_ref) {
  var title = _ref.title,
      stores = _ref.stores,
      pinIcon = _ref.pinIcon,
      labels = _ref.labels,
      storesTypes = _ref.storesTypes,
      thumbnailImgForVideo = _ref.thumbnailImgForVideo;

  var _useRouter = (0, _router.useRouter)(),
      query = _useRouter.query;

  (0, _lib.useUpdateStrings)('stores', labels);

  var _useState = (0, _react.useState)(labels.tabList),
      selectedTab = _useState[0],
      setSelectedTab = _useState[1];

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

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

  var desktopWidth = parseInt(theme.breakpoints.lg.min.split('px')[0]);
  var renderMapDesktop = width >= desktopWidth;
  var renderMapMobile = width < desktopWidth; // TODO Remove before going to production

  (0, _react.useEffect)(function () {
    if (width > desktopWidth) {
      setSelectedTab(labels.tabList);
    }
  }, [width]);
  var tabs = [labels.tabList, labels.tabMap];
  var storeTypes = storesTypes.map(function (storeType) {
    return storeType.name;
  });

  if (query.storeSlug) {
    var store = stores.find(function (store) {
      return store.slug === query.storeSlug;
    });

    if (store) {
      return /*#__PURE__*/_react["default"].createElement(_Components.SingleStore, {
        data: store,
        thumbnailImgForVideo: thumbnailImgForVideo
      });
    }

    return labels.storeNotFoundLabel;
  }

  return /*#__PURE__*/_react["default"].createElement(_stores.StoresContextProvider, {
    stores: stores,
    type: [{
      name: 'District'
    }]
  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Flex, null, /*#__PURE__*/_react["default"].createElement(ContentWrapper, null, /*#__PURE__*/_react["default"].createElement(HeadingWrapper, null, /*#__PURE__*/_react["default"].createElement("h1", null, title)), /*#__PURE__*/_react["default"].createElement(SearchWrapper, null, /*#__PURE__*/_react["default"].createElement(CitySelectorWrapper, null, /*#__PURE__*/_react["default"].createElement(_CitySelector.CitySelector, null)), /*#__PURE__*/_react["default"].createElement(_Components.StoreTypes, {
    types: storeTypes,
    label: labels.storeTypesLabel
  })), /*#__PURE__*/_react["default"].createElement(StoreListContainer, null, /*#__PURE__*/_react["default"].createElement(_Tabs.Tabs, {
    tabs: tabs,
    selected: selectedTab,
    onSelect: setSelectedTab
  }), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, selectedTab === labels.tabList && /*#__PURE__*/_react["default"].createElement(_Components.StoreList, {
    renderStore: function renderStore(store) {
      return /*#__PURE__*/_react["default"].createElement(_Components.Store, {
        store: store
      });
    },
    pinIcon: pinIcon
  }), renderMapMobile && /*#__PURE__*/_react["default"].createElement(MobileMapContainer, {
    className: selectedTab === labels.tabMap ? 'd-block' : 'd-none'
  }, /*#__PURE__*/_react["default"].createElement(StickyMap, null, /*#__PURE__*/_react["default"].createElement(StoresMap, {
    pinIcon: pinIcon
  })))))), renderMapDesktop && /*#__PURE__*/_react["default"].createElement(DesktopMapContainer, null, /*#__PURE__*/_react["default"].createElement(StickyMap, null, /*#__PURE__*/_react["default"].createElement(StoresMap, {
    pinIcon: pinIcon
  }))))));
};

exports.Stores = Stores;

var Container = _styledComponents["default"].section.attrs({
  className: 'container'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Flex = _styledComponents["default"].div.attrs({
  className: 'row'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var ContentWrapper = _styledComponents["default"].div.attrs({
  className: 'col-12 col-md-12 col-lg-4 p-0 ml-auto'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (min-width: 1024px) {\n    max-width: 36.5rem !important;\n  }\n"])));

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

var DesktopMapContainer = _styledComponents["default"].aside.attrs({
  className: 'd-none d-lg-block col-md-7 col-lg-8 p-0 mr-auto'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

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

var CitySelectorWrapper = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  flex: 2;\n"])));

var SearchWrapper = _styledComponents["default"].div.attrs({
  className: 'd-flex mb-3'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n"])));

var HeadingWrapper = _styledComponents["default"].div.attrs({
  className: 'mb-3'
})(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var StickyMap = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: sticky;\n  top: 8rem;\n"])));
//# sourceMappingURL=stores.component.js.map