import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import * as React from 'react';
export function useTransformationState(_ref) {
  var elementRef = _ref.elementRef,
      containerRef = _ref.containerRef,
      updateKey = _ref.updateKey;

  var _React$useState = React.useState({
    previousSnapshot: null,
    currentSnapshot: null,
    diffLeft: 0,
    diffTop: 0,
    diffWidth: 0,
    diffHeight: 0,
    diffScaleX: 0,
    diffScaleY: 0
  }),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      state = _React$useState2[0],
      setState = _React$useState2[1];

  var updateState = React.useCallback(function () {
    var element = elementRef.current;
    var container = containerRef ? containerRef.current : document.body;

    if (element !== null && container !== null) {
      setState(function (previous) {
        return createTransformationState({
          element: element,
          container: container,
          previous: previous
        });
      });
    }
  }, [containerRef, elementRef]);
  /**
   * The useLayoutEffect hook is required to catch transformation
   * changes before they will be painted. This could be a problem
   * during the first render when mounting both the container and
   * its deep descendant, causing the containerRef to be null.
   */

  var didTheFirstRender = React.useRef(false);
  React.useEffect(function () {
    if (didTheFirstRender.current === false) {
      didTheFirstRender.current = true;
      updateState();
    }
  }, [updateState]);
  React.useLayoutEffect(function () {
    if (didTheFirstRender.current === true) {
      updateState();
    }
  }, [updateState, updateKey]);
  return state;
}

function createTransformationState(_ref2) {
  var element = _ref2.element,
      container = _ref2.container,
      previous = _ref2.previous;
  var previousSnapshot = previous.currentSnapshot;
  var currentSnapshot = createElementSnapshot({
    element: element,
    container: container
  });

  if (previousSnapshot === null) {
    return _objectSpread(_objectSpread({}, previous), {}, {
      previousSnapshot: previousSnapshot,
      currentSnapshot: currentSnapshot
    });
  }

  var diffWidth = currentSnapshot.width - previousSnapshot.width;
  var diffHeight = currentSnapshot.height - previousSnapshot.height;
  return {
    previousSnapshot: previousSnapshot,
    currentSnapshot: currentSnapshot,
    diffLeft: currentSnapshot.left - previousSnapshot.left,
    diffTop: currentSnapshot.top - previousSnapshot.top,
    diffWidth: diffWidth,
    diffHeight: diffHeight,
    diffScaleX: diffWidth / currentSnapshot.width,
    diffScaleY: diffHeight / currentSnapshot.height
  };
}

function createElementSnapshot(_ref3) {
  var element = _ref3.element,
      container = _ref3.container;
  var elementRect = element.getBoundingClientRect();
  var containerRect = container.getBoundingClientRect();
  return {
    left: elementRect.left - containerRect.left,
    top: elementRect.top - containerRect.top,
    width: elementRect.width,
    height: elementRect.height
  };
}