"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useGalleryContext = exports.LightboxMedia = exports.LightboxGalleryProvider = void 0;

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

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

var _style = _interopRequireDefault(require("!file-loader!react-image-lightbox/style.css"));

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

var _reactHelmetAsync = require("react-helmet-async");

var _Box = require("../Box");

var _Lightbox = require("./Lightbox");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var __jsx = _react["default"].createElement;

/**
 *  useGalleryContext exposes the following props. can be used in cases such as adding off-screen images
 *  register(mediaItem): function to add new item to lightbox
 *  unregister(mediaItem): function to remove an item from the lightbox
 *  media[]: array of current items in the lightbox
 *  activeItem: current active lightbox item. lightbox will not display if there is no activeItem
 *  activeIndex: index of active item in array
 *  setActiveItem(mediaItem): set new activeItem
 *  onPrev: set active item to current index - 1
 *  onNext: set active item to current index + 1
 */
var GalleryContext = /*#__PURE__*/(0, _react.createContext)({
  register: function register(media) {
    return null;
  },
  unregister: function unregister(media) {
    return null;
  },
  setActiveItem: function setActiveItem(media) {
    return null;
  },
  onNext: function onNext() {
    return null;
  },
  onPrev: function onPrev() {
    return null;
  },
  media: [],
  activeItem: {
    src: '',
    cover: '',
    type: 'image'
  },
  activeIndex: null
}); // context provider hoc

var LightboxGalleryProvider = function LightboxGalleryProvider(props) {
  var _useState = (0, _react.useState)(null),
      activeItem = _useState[0],
      setActiveItem = _useState[1];

  var _useState2 = (0, _react.useState)([]),
      mediaList = _useState2[0],
      setMediaList = _useState2[1];

  var media = [];
  var activeIndex = mediaList.findIndex(function (i) {
    return i.src === (activeItem && activeItem.src);
  });
  var numMedia = mediaList.length;

  var register = function register(mediaItem) {
    media.push(mediaItem);
    setMediaList(media);
  };

  var unregister = function unregister(mediaItem) {
    setMediaList(mediaList.filter(function (item) {
      return item.src !== mediaItem.src;
    }));
  };

  var onNext = function onNext() {
    if (activeIndex === numMedia - 1) {
      setActiveItem(mediaList[0]);
    } else {
      setActiveItem(mediaList[activeIndex + 1]);
    }
  };

  var onPrev = function onPrev() {
    if (activeIndex === 0) {
      setActiveItem(mediaList[numMedia - 1]);
    } else {
      setActiveItem(mediaList[activeIndex - 1]);
    }
  };

  var context = {
    register: register,
    unregister: unregister,
    media: mediaList,
    activeItem: activeItem,
    activeIndex: activeIndex,
    setActiveItem: setActiveItem,
    onPrev: onPrev,
    onNext: onNext,
    showThumbnails: props.showThumbnails
  };
  var LightboxTheme = String(_style["default"]);
  return __jsx(GalleryContext.Provider, {
    value: context
  }, props.children, __jsx(_Lightbox.Lightbox, null), __jsx(_reactHelmetAsync.Helmet, null, __jsx("link", {
    rel: "stylesheet",
    type: "text/css",
    href: LightboxTheme
  })));
};

exports.LightboxGalleryProvider = LightboxGalleryProvider;

var useGalleryContext = function useGalleryContext() {
  var context = (0, _react.useContext)(GalleryContext);

  if (context === undefined) {
    throw new Error('useGalleryContext must be used within a LightboxGalleryProvider');
  }

  return context;
};

exports.useGalleryContext = useGalleryContext;

var LightboxMedia = function LightboxMedia(_ref) {
  var src = _ref.src,
      type = _ref.type,
      cover = _ref.cover,
      children = _ref.children,
      rest = (0, _objectWithoutProperties2["default"])(_ref, ["src", "type", "cover", "children"]);
  var context = useGalleryContext();
  var media = {
    src: src,
    type: type,
    cover: cover
  };
  (0, _react.useEffect)(function () {
    // add media item to lightbox context media array on mount
    context.register(media); // remove media item from lightbox context media array on unmount

    return function () {
      context.unregister(media);
    };
  }, []); // when the media item is clicked, set the context's active item

  return __jsx(_Box.Box, (0, _extends2["default"])({
    onClick: function onClick() {
      context.setActiveItem(media);
    },
    cursor: "pointer"
  }, rest), children);
};

exports.LightboxMedia = LightboxMedia;
//# sourceMappingURL=components.js.map