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

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

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { StoresContextProvider } from './stores.context';
import { StoreList, Store } from './Components';
import { StoreTypes } from './Components';
import { SingleStore } from './Components';
import { CitySelector } from './Components/CitySelector';
import { Tabs } from './Components/Tabs';
import dynamic from 'next/dynamic';
import { useUpdateStrings, useWindowDimensions, useConfigState } from '@sentecacommerce-theme/lib';
import { useRouter } from 'next/router';
var StoresMap = dynamic(() => import('./Components/StoresMap').then(mod => mod.StoresMap), {
  ssr: false
});
export var Stores = (_ref) => {
  var {
    title,
    stores,
    pinIcon,
    labels,
    storesTypes,
    thumbnailImgForVideo
  } = _ref;
  var {
    query
  } = useRouter();
  useUpdateStrings('stores', labels);
  var [selectedTab, setSelectedTab] = useState(labels.tabList);
  var {
    width
  } = useWindowDimensions();
  var {
    theme
  } = useConfigState();
  var desktopWidth = parseInt(theme.breakpoints.lg.min.split('px')[0]);
  var renderMapDesktop = width >= desktopWidth;
  var renderMapMobile = width < desktopWidth; // TODO Remove before going to production

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

  if (query.storeSlug) {
    var store = stores.find(store => store.slug === query.storeSlug);

    if (store) {
      return /*#__PURE__*/React.createElement(SingleStore, {
        data: store,
        thumbnailImgForVideo: thumbnailImgForVideo
      });
    }

    return labels.storeNotFoundLabel;
  }

  return /*#__PURE__*/React.createElement(StoresContextProvider, {
    stores: stores,
    type: [{
      name: 'District'
    }]
  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement(HeadingWrapper, null, /*#__PURE__*/React.createElement("h1", null, title)), /*#__PURE__*/React.createElement(SearchWrapper, null, /*#__PURE__*/React.createElement(CitySelectorWrapper, null, /*#__PURE__*/React.createElement(CitySelector, null)), /*#__PURE__*/React.createElement(StoreTypes, {
    types: storeTypes,
    label: labels.storeTypesLabel
  })), /*#__PURE__*/React.createElement(StoreListContainer, null, /*#__PURE__*/React.createElement(Tabs, {
    tabs: tabs,
    selected: selectedTab,
    onSelect: setSelectedTab
  }), /*#__PURE__*/React.createElement(React.Fragment, null, selectedTab === labels.tabList && /*#__PURE__*/React.createElement(StoreList, {
    renderStore: store => /*#__PURE__*/React.createElement(Store, {
      store: store
    }),
    pinIcon: pinIcon
  }), renderMapMobile && /*#__PURE__*/React.createElement(MobileMapContainer, {
    className: selectedTab === labels.tabMap ? 'd-block' : 'd-none'
  }, /*#__PURE__*/React.createElement(StickyMap, null, /*#__PURE__*/React.createElement(StoresMap, {
    pinIcon: pinIcon
  })))))), renderMapDesktop && /*#__PURE__*/React.createElement(DesktopMapContainer, null, /*#__PURE__*/React.createElement(StickyMap, null, /*#__PURE__*/React.createElement(StoresMap, {
    pinIcon: pinIcon
  }))))));
};
var Container = styled.section.attrs({
  className: 'container'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Flex = styled.div.attrs({
  className: 'row'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var ContentWrapper = styled.div.attrs({
  className: 'col-12 col-md-12 col-lg-4 p-0 ml-auto'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  @media (min-width: 1024px) {\n    max-width: 36.5rem !important;\n  }\n"])));
var StoreListContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
var DesktopMapContainer = styled.aside.attrs({
  className: 'd-none d-lg-block col-md-7 col-lg-8 p-0 mr-auto'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([""])));
var MobileMapContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose([""])));
var CitySelectorWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  flex: 2;\n"])));
var SearchWrapper = styled.div.attrs({
  className: 'd-flex mb-3'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
var HeadingWrapper = styled.div.attrs({
  className: 'mb-3'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose([""])));
var StickyMap = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 8rem;\n"])));
//# sourceMappingURL=stores.component.js.map