"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RevealImageComponent = RevealImageComponent;
var _react = _interopRequireWildcard(require("react"));
var _eui = require("@elastic/eui");
var _react2 = require("@emotion/react");
var _common = require("@kbn/presentation-util-plugin/common");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0 and the Server Side Public License, v 1; you may not use this file except
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */

const revealImageParentStyle = (0, _react2.css)`
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
`;
const revealImageAlignerStyle = {
  backgroundSize: 'contain',
  backgroundRepeat: 'no-repeat'
};
const revealImageStyle = {
  userSelect: 'none'
};
function RevealImageComponent({
  onLoaded,
  parentNode,
  percent,
  origin,
  image,
  emptyImage
}) {
  const [loaded, setLoaded] = (0, _react.useState)(false);
  const [dimensions, setDimensions] = (0, _react.useState)({
    width: 1,
    height: 1
  });
  const imgRef = (0, _react.useRef)(null);
  const parentNodeDimensions = (0, _eui.useResizeObserver)(parentNode);

  // modify the top-level container class
  parentNode.className = 'revealImage';
  parentNode.setAttribute('style', revealImageParentStyle.styles);

  // set up the overlay image
  const updateImageView = (0, _react.useCallback)(() => {
    if (imgRef.current) {
      setDimensions({
        height: imgRef.current.naturalHeight,
        width: imgRef.current.naturalWidth
      });
      setLoaded(true);
      onLoaded();
    }
  }, [imgRef, onLoaded]);
  (0, _react.useEffect)(() => {
    updateImageView();
  }, [parentNodeDimensions, updateImageView]);
  function getClipPath(percentParam, originParam = 'bottom') {
    const directions = {
      bottom: 0,
      left: 1,
      top: 2,
      right: 3
    };
    const values = [0, 0, 0, 0];
    values[directions[originParam]] = `${100 - percentParam * 100}%`;
    return `inset(${values.join(' ')})`;
  }
  function getImageSizeStyle() {
    const imgStyles = {};
    const imgDimensions = {
      height: dimensions.height,
      width: dimensions.width,
      ratio: dimensions.height / dimensions.width
    };
    const domNodeDimensions = {
      width: parentNode.clientWidth,
      height: parentNode.clientHeight,
      ratio: parentNode.clientHeight / parentNode.clientWidth
    };
    if (imgDimensions.ratio > domNodeDimensions.ratio) {
      imgStyles.height = domNodeDimensions.height;
      imgStyles.width = 'initial';
    } else {
      imgStyles.width = domNodeDimensions.width;
      imgStyles.height = 'initial';
    }
    return imgStyles;
  }
  const additionalAlignerStyles = {};
  if ((0, _common.isValidUrl)(emptyImage !== null && emptyImage !== void 0 ? emptyImage : '')) {
    // only use empty image if one is provided
    additionalAlignerStyles.backgroundImage = `url(${emptyImage})`;
  }
  let additionalImgStyles = {};
  if (imgRef.current && loaded) additionalImgStyles = getImageSizeStyle();
  additionalImgStyles.clipPath = getClipPath(percent, origin);
  if (imgRef.current && loaded) {
    imgRef.current.style.setProperty('-webkit-clip-path', getClipPath(percent, origin));
  }
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "revealImageAligner",
    css: {
      ...revealImageAlignerStyle,
      ...additionalAlignerStyles
    }
  }, /*#__PURE__*/_react.default.createElement("img", {
    ref: imgRef,
    onLoad: updateImageView,
    css: (0, _react2.css)({
      ...revealImageStyle,
      ...additionalImgStyles
    }),
    src: image,
    alt: "",
    role: "presentation"
  }));
}