"use strict";

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

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

exports.__esModule = true;
exports.SingleStore = 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 _link = _interopRequireDefault(require("next/link"));

var _Icons = require("../../../Common/Icons");

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

var _default = require("../../templateData/default");

var _Carousel = require("../Carousel");

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

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

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;

var YouTube = (0, _dynamic["default"])(function () {
  return Promise.resolve().then(function () {
    return (0, _interopRequireWildcard2["default"])(require('react-youtube'));
  });
});

var SingleStore = function SingleStore(_ref) {
  var data = _ref.data,
      thumbnailImgForVideo = _ref.thumbnailImgForVideo;
  var labels = (0, _lib.useLabels)('stores');
  var name = data.name,
      fullAddress = data.fullAddress,
      workTime = data.workTime,
      phoneNumber = data.phoneNumber,
      relatedStores = data.relatedStores,
      latitude = data.latitude,
      longitude = data.longitude,
      workHours = data.workHours,
      image = data.image,
      slides = data.carousel;

  var _useState = (0, _react.useState)(0),
      distance = _useState[0],
      setDistance = _useState[1];

  var _useState2 = (0, _react.useState)([]),
      players = _useState2[0],
      setPlayers = _useState2[1];

  var _useState3 = (0, _react.useState)(null),
      slideEl = _useState3[0],
      setSlideEl = _useState3[1];

  var relatedStoresArr = [];

  _default.data.stores.forEach(function (store) {
    relatedStores.forEach(function (relatedStore) {
      if (relatedStore.slug === store.slug) {
        relatedStoresArr.push(store);
      }
    });
  });

  var closesAt = (0, _utils.getClosesAt)(workHours);
  (0, _react.useEffect)(function () {
    navigator.geolocation.getCurrentPosition(function (pos) {
      var userPos = {
        lat: pos.coords.latitude,
        lng: pos.coords.longitude
      };
      var storePos = {
        lat: latitude,
        lng: longitude
      };
      var distance = (0, _lib.getDistance)(userPos, storePos);
      setDistance(distance);
    });
  }, []);
  var playerOptions = {
    height: '500',
    width: '100%',
    playerVars: {
      controls: 0,
      rel: 0,
      showinfo: 0,
      ecver: 2,
      modestbranding: 1,
      autoplay: 1,
      loop: 1,
      mute: 1,
      disablekb: 1
    }
  };

  var onPlayerReady = function onPlayerReady(e) {
    var _e$target;

    e == null ? void 0 : (_e$target = e.target) == null ? void 0 : _e$target.playVideo();
    setPlayers([].concat(players, [e.target]));
  };

  var onPlayerEnd = function onPlayerEnd(e) {
    var _e$target2;

    e == null ? void 0 : (_e$target2 = e.target) == null ? void 0 : _e$target2.playVideo();
  };

  var onChange = function onChange(carousel) {
    var slideNodes = carousel.slideNodes();
    var currentSlide = carousel.selectedScrollSnap();
    var slideEl = slideNodes[currentSlide];
    setSlideEl(slideEl);
  };

  (0, _react.useEffect)(function () {
    var _slideEl$children$, _slideEl$children$$ch;

    // detect if the slide is a video and if it, play it
    var iframe = slideEl == null ? void 0 : (_slideEl$children$ = slideEl.children[0]) == null ? void 0 : (_slideEl$children$$ch = _slideEl$children$.children[0]) == null ? void 0 : _slideEl$children$$ch.children[0];

    if (iframe) {
      players.forEach(function (player) {
        var _player$h;

        return (player == null ? void 0 : (_player$h = player.h) == null ? void 0 : _player$h.id) === (iframe == null ? void 0 : iframe.id) && player.playVideo();
      });
    } else {
      players.forEach(function (player) {
        return player.stopVideo();
      });
    }
  }, [slideEl]);
  return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "d-flex align-items-center px-2"
  }, /*#__PURE__*/_react["default"].createElement(_Icons.IconArrowLeft, {
    className: "mr-1"
  }), /*#__PURE__*/_react["default"].createElement(_link["default"], {
    href: "/stores"
  }, 'Back to search' || labels.backToSearchLabel)), /*#__PURE__*/_react["default"].createElement(HeaderContainer, null, /*#__PURE__*/_react["default"].createElement(Box, null, /*#__PURE__*/_react["default"].createElement(Name, null, name), /*#__PURE__*/_react["default"].createElement(Distance, null, distance.toFixed(2) + ' km')), /*#__PURE__*/_react["default"].createElement(HeaderContainerInner, null, /*#__PURE__*/_react["default"].createElement(Box, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "pr-4"
  }, /*#__PURE__*/_react["default"].createElement(Location, null, labels.locationLabel), /*#__PURE__*/_react["default"].createElement("span", null, fullAddress), /*#__PURE__*/_react["default"].createElement(DirectionsLink, {
    className: "d-none d-lg-block",
    href: "https://www.google.com/maps/dir/" + latitude + "," + longitude,
    target: "_blank"
  }, labels.getDirectionsLabel))), /*#__PURE__*/_react["default"].createElement(Box, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, labels.storeHoursLabel), /*#__PURE__*/_react["default"].createElement("pre", null, workTime)), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", null, phoneNumber), /*#__PURE__*/_react["default"].createElement(DirectionsLink, {
    className: "d-block d-lg-none",
    href: "https://www.google.com/maps/dir/" + latitude + "," + longitude,
    target: "_blank"
  }, labels.getDirectionsLabel)))))), /*#__PURE__*/_react["default"].createElement(ShowcaseContainer, null, /*#__PURE__*/_react["default"].createElement(ImageContainer, null, /*#__PURE__*/_react["default"].createElement(LeftImage, {
    src: image
  })), /*#__PURE__*/_react["default"].createElement(CarouselContainer, null, /*#__PURE__*/_react["default"].createElement(_Carousel.CarouselComponent, {
    thumbnailImgForVideo: thumbnailImgForVideo,
    onChange: onChange,
    slides: slides,
    renderSlide: function renderSlide(slide) {
      return !slide.isVideo ? /*#__PURE__*/_react["default"].createElement(Image, {
        src: slide.url
      }) : /*#__PURE__*/_react["default"].createElement(VideoWrapper, null, /*#__PURE__*/_react["default"].createElement(YouTube, {
        videoId: slide.url.split('embed/')[1],
        opts: playerOptions,
        onReady: onPlayerReady,
        onEnd: onPlayerEnd
      }));
    }
  }))), /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement("h1", null, labels.relatedStoresLabel), /*#__PURE__*/_react["default"].createElement(RelatedStoresGrid, null, relatedStoresArr.map(function (store) {
    return /*#__PURE__*/_react["default"].createElement(RelatedStore, {
      key: "Store__" + store.name
    }, /*#__PURE__*/_react["default"].createElement(_link["default"], {
      href: store.slug
    }, /*#__PURE__*/_react["default"].createElement(RelatedStoreImg, {
      src: store.imageSmall
    })), /*#__PURE__*/_react["default"].createElement(RelatedStoreContent, null, /*#__PURE__*/_react["default"].createElement(RelatedStoreName, null, /*#__PURE__*/_react["default"].createElement(_link["default"], {
      href: store.slug
    }, store.name)), /*#__PURE__*/_react["default"].createElement(RelatedStoreAddress, null, store.fullAddress)), /*#__PURE__*/_react["default"].createElement(ClosesAtLabel, null, labels.closesAtLabel, " ", closesAt));
  }))));
};

exports.SingleStore = SingleStore;

var Wrapper = _styledComponents["default"].div.attrs({
  className: 'pt-5'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  overflow-x: hidden;\n"])));

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

var HeaderContainer = _styledComponents["default"].div.attrs({
  className: 'mt-3 row row-cols-lg-2 mb-5 mx-0'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var HeaderContainerInner = _styledComponents["default"].div.attrs({
  className: 'row row-cols-md-2 mb-2'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & > * {\n    max-width: 26.2rem;\n  }\n"])));

var Box = _styledComponents["default"].div.attrs({
  className: 'p-0 col-12 col-md-6 mt-3 mt-lg-0 px-3'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Name = _styledComponents["default"].h1(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 2.8rem;\n"])));

var Location = _styledComponents["default"].h3.attrs({
  className: 'p-0'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.6rem;\n"])));

var RelatedStoresGrid = _styledComponents["default"].div.attrs({
  className: 'mt-4 row row-cols-lg-3'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var RelatedStore = _styledComponents["default"].div.attrs({
  className: 'mb-3 d-flex flex-row flex-md-column'
})(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  border-bottom: 1px solid ", ";\n\n  @media (min-width: ", ") {\n    border: 0;\n  }\n\n  @media (min-width: ", ") {\n    border: 0;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.grey;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.md.min;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.lg.min;
});

var RelatedStoreImg = _styledComponents["default"].img.attrs({
  className: 'mr-2 pb-2 mb-1'
})(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n\n  width: 12rem;\n  height: 12rem;\n\n  @media (min-width: ", ") {\n    height: auto;\n    width: auto;\n  }\n\n  @media (min-width: ", ") {\n    height: auto;\n    width: auto;\n  }\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.md.min;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.breakpoints.lg.min;
});

var RelatedStoreContent = _styledComponents["default"].div.attrs({
  className: 'pb-2 my-lg-3'
})(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (min-width: ", ") {\n    max-width: 60%;\n  }\n\n  @media (min-width: ", ") {\n    max-width: 100%;\n    min-height: 10rem;\n  }\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.breakpoints.md.min;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.breakpoints.lg.min;
});

var RelatedStoreName = _styledComponents["default"].h3.attrs({
  className: 'mb-2'
})(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.6rem;\n  color: ", ";\n"])), function (_ref9) {
  var theme = _ref9.theme;
  return theme.palette.primary;
});

var RelatedStoreAddress = _styledComponents["default"].span(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.4rem;\n  color: ", ";\n"])), function (_ref10) {
  var theme = _ref10.theme;
  return theme.palette.primary;
});

var ShowcaseContainer = _styledComponents["default"].div.attrs({
  className: 'row row-cols-lg-2 my-5'
})(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 50rem;\n  overflow-y: hidden;\n  position: relative;\n"])));

var ImageContainer = _styledComponents["default"].div.attrs({
  className: 'd-none d-lg-block mb-5 col-lg-4 p-0'
})(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 100%;\n"])));

var CarouselContainer = _styledComponents["default"].div.attrs({
  className: 'col-lg-8 p-0'
})(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var VideoWrapper = _styledComponents["default"].div.attrs({
  className: 'video-wrapper'
})(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  /* pointer-events: none; */\n\n  iframe {\n    pointer-events: none;\n  }\n"])));

var LeftImage = _styledComponents["default"].img.attrs({
  className: 'p-0 d-none d-lg-block'
})(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: block;\n  height: 100%;\n  width: 100%;\n\n  object-fit: cover;\n"])));

var Image = _styledComponents["default"].img(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 100%;\n  width: 100%;\n\n  object-fit: cover;\n"])));

var DirectionsLink = _styledComponents["default"].a.attrs({
  className: 'mt-4'
})(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Distance = _styledComponents["default"].span(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n"])), function (_ref11) {
  var theme = _ref11.theme;
  return theme.palette.hint;
});

var ClosesAtLabel = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'p',
  className: 'mt-1 d-none d-lg-block'
})(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  font-size: 1.4rem;\n"])), function (_ref12) {
  var theme = _ref12.theme;
  return theme.palette.hint;
});
//# sourceMappingURL=index.js.map