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

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

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import Link from 'next/link';
import { IconArrowLeft } from '../../../Common/Icons';
import { Typography } from '../../../Common';
import { data as storesData } from '../../templateData/default';
import { CarouselComponent } from '../Carousel';
import { getClosesAt } from '../../utils';
import { getDistance, useLabels } from '@sentecacommerce-theme/lib';
import dynamic from 'next/dynamic';
var YouTube = dynamic(() => import('react-youtube'));
export var SingleStore = (_ref) => {
  var {
    data,
    thumbnailImgForVideo
  } = _ref;
  var labels = useLabels('stores');
  var {
    name,
    fullAddress,
    workTime,
    phoneNumber,
    relatedStores,
    latitude,
    longitude,
    workHours,
    image,
    carousel: slides
  } = data;
  var [distance, setDistance] = useState(0);
  var [players, setPlayers] = useState([]);
  var [slideEl, setSlideEl] = useState(null);
  var relatedStoresArr = [];
  storesData.stores.forEach(store => {
    relatedStores.forEach(relatedStore => {
      if (relatedStore.slug === store.slug) {
        relatedStoresArr.push(store);
      }
    });
  });
  var closesAt = getClosesAt(workHours);
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(pos => {
      var userPos = {
        lat: pos.coords.latitude,
        lng: pos.coords.longitude
      };
      var storePos = {
        lat: latitude,
        lng: longitude
      };
      var distance = 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 = e => {
    var _e$target;

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

  var onPlayerEnd = e => {
    var _e$target2;

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

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

  useEffect(() => {
    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(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(player => player.stopVideo());
    }
  }, [slideEl]);
  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement("div", {
    className: "d-flex align-items-center px-2"
  }, /*#__PURE__*/React.createElement(IconArrowLeft, {
    className: "mr-1"
  }), /*#__PURE__*/React.createElement(Link, {
    href: "/stores"
  }, 'Back to search' || labels.backToSearchLabel)), /*#__PURE__*/React.createElement(HeaderContainer, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Name, null, name), /*#__PURE__*/React.createElement(Distance, null, distance.toFixed(2) + ' km')), /*#__PURE__*/React.createElement(HeaderContainerInner, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
    className: "pr-4"
  }, /*#__PURE__*/React.createElement(Location, null, labels.locationLabel), /*#__PURE__*/React.createElement("span", null, fullAddress), /*#__PURE__*/React.createElement(DirectionsLink, {
    className: "d-none d-lg-block",
    href: "https://www.google.com/maps/dir/" + latitude + "," + longitude,
    target: "_blank"
  }, labels.getDirectionsLabel))), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, labels.storeHoursLabel), /*#__PURE__*/React.createElement("pre", null, workTime)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, phoneNumber), /*#__PURE__*/React.createElement(DirectionsLink, {
    className: "d-block d-lg-none",
    href: "https://www.google.com/maps/dir/" + latitude + "," + longitude,
    target: "_blank"
  }, labels.getDirectionsLabel)))))), /*#__PURE__*/React.createElement(ShowcaseContainer, null, /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement(LeftImage, {
    src: image
  })), /*#__PURE__*/React.createElement(CarouselContainer, null, /*#__PURE__*/React.createElement(CarouselComponent, {
    thumbnailImgForVideo: thumbnailImgForVideo,
    onChange: onChange,
    slides: slides,
    renderSlide: slide => !slide.isVideo ? /*#__PURE__*/React.createElement(Image, {
      src: slide.url
    }) : /*#__PURE__*/React.createElement(VideoWrapper, null, /*#__PURE__*/React.createElement(YouTube, {
      videoId: slide.url.split('embed/')[1],
      opts: playerOptions,
      onReady: onPlayerReady,
      onEnd: onPlayerEnd
    }))
  }))), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement("h1", null, labels.relatedStoresLabel), /*#__PURE__*/React.createElement(RelatedStoresGrid, null, relatedStoresArr.map(store => /*#__PURE__*/React.createElement(RelatedStore, {
    key: "Store__" + store.name
  }, /*#__PURE__*/React.createElement(Link, {
    href: store.slug
  }, /*#__PURE__*/React.createElement(RelatedStoreImg, {
    src: store.imageSmall
  })), /*#__PURE__*/React.createElement(RelatedStoreContent, null, /*#__PURE__*/React.createElement(RelatedStoreName, null, /*#__PURE__*/React.createElement(Link, {
    href: store.slug
  }, store.name)), /*#__PURE__*/React.createElement(RelatedStoreAddress, null, store.fullAddress)), /*#__PURE__*/React.createElement(ClosesAtLabel, null, labels.closesAtLabel, " ", closesAt))))));
};
var Wrapper = styled.div.attrs({
  className: 'pt-5'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  overflow-x: hidden;\n"])));
var Container = styled.div.attrs({
  className: 'container'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var HeaderContainer = styled.div.attrs({
  className: 'mt-3 row row-cols-lg-2 mb-5 mx-0'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var HeaderContainerInner = styled.div.attrs({
  className: 'row row-cols-md-2 mb-2'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  & > * {\n    max-width: 26.2rem;\n  }\n"])));
var Box = styled.div.attrs({
  className: 'p-0 col-12 col-md-6 mt-3 mt-lg-0 px-3'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([""])));
var Name = styled.h1(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  font-size: 2.8rem;\n"])));
var Location = styled.h3.attrs({
  className: 'p-0'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  font-size: 1.6rem;\n"])));
var RelatedStoresGrid = styled.div.attrs({
  className: 'mt-4 row row-cols-lg-3'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose([""])));
var RelatedStore = styled.div.attrs({
  className: 'mb-3 d-flex flex-row flex-md-column'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid ", ";\n\n  @media (min-width: ", ") {\n    border: 0;\n  }\n\n  @media (min-width: ", ") {\n    border: 0;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.grey;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.md.min;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.lg.min;
});
var RelatedStoreImg = styled.img.attrs({
  className: 'mr-2 pb-2 mb-1'
})(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\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"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.md.min;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.lg.min;
});
var RelatedStoreContent = styled.div.attrs({
  className: 'pb-2 my-lg-3'
})(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  @media (min-width: ", ") {\n    max-width: 60%;\n  }\n\n  @media (min-width: ", ") {\n    max-width: 100%;\n    min-height: 10rem;\n  }\n"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.breakpoints.md.min;
}, (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.breakpoints.lg.min;
});
var RelatedStoreName = styled.h3.attrs({
  className: 'mb-2'
})(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  font-size: 1.6rem;\n  color: ", ";\n"])), (_ref9) => {
  var {
    theme
  } = _ref9;
  return theme.palette.primary;
});
var RelatedStoreAddress = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  font-size: 1.4rem;\n  color: ", ";\n"])), (_ref10) => {
  var {
    theme
  } = _ref10;
  return theme.palette.primary;
});
var ShowcaseContainer = styled.div.attrs({
  className: 'row row-cols-lg-2 my-5'
})(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n  height: 50rem;\n  overflow-y: hidden;\n  position: relative;\n"])));
var ImageContainer = styled.div.attrs({
  className: 'd-none d-lg-block mb-5 col-lg-4 p-0'
})(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n  height: 100%;\n"])));
var CarouselContainer = styled.div.attrs({
  className: 'col-lg-8 p-0'
})(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose([""])));
var VideoWrapper = styled.div.attrs({
  className: 'video-wrapper'
})(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  /* pointer-events: none; */\n\n  iframe {\n    pointer-events: none;\n  }\n"])));
var LeftImage = styled.img.attrs({
  className: 'p-0 d-none d-lg-block'
})(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 100%;\n  width: 100%;\n\n  object-fit: cover;\n"])));
var Image = styled.img(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  width: 100%;\n\n  object-fit: cover;\n"])));
var DirectionsLink = styled.a.attrs({
  className: 'mt-4'
})(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose([""])));
var Distance = styled.span(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), (_ref11) => {
  var {
    theme
  } = _ref11;
  return theme.palette.hint;
});
var ClosesAtLabel = styled(Typography).attrs({
  as: 'p',
  className: 'mt-1 d-none d-lg-block'
})(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 1.4rem;\n"])), (_ref12) => {
  var {
    theme
  } = _ref12;
  return theme.palette.hint;
});
//# sourceMappingURL=index.js.map