import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import Transition from '../Transition';
import DummyBox from './common/DummyBox';
import Stage from './common/Stage';
import { useIsomorphicLayoutEffect } from '../../utils/useIsomorphicLayoutEffect';
import { useTransformationState } from './common/useTransformationState';
export var CurvedMovement = function CurvedMovement() {
  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      expanded = _React$useState2[0],
      setExpanded = _React$useState2[1];

  var _React$useState3 = React.useState({
    xMove: null,
    yMove: null,
    scale: null
  }),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      effects = _React$useState4[0],
      setEffects = _React$useState4[1];

  var elementRef = React.useRef(null);
  var containerRef = React.useRef(null);
  var transformation = useTransformationState({
    elementRef: elementRef,
    containerRef: containerRef,
    updateKey: expanded
  });
  var prevTransformation = React.useRef();
  useIsomorphicLayoutEffect(function () {
    if (transformation.diffTop === 0 || transformation === prevTransformation.current) {
      return;
    }

    prevTransformation.current = transformation;
    var origin = 'left top';
    var duration = 240;
    /**
     * https://tobiasahlin.com/blog/curved-path-animations-in-css/
     * The time difference between axes curves the trajectory of motion.
     */

    var differenceFactor = 0.4;
    var xMoveDuration = expanded ? duration * (1 - differenceFactor) : duration * (1 + differenceFactor);
    setEffects({
      xMove: {
        initial: {
          transform: {
            translateX: -transformation.diffLeft
          }
        },
        animate: {
          transform: {
            translateX: 0,
            origin: origin,
            duration: xMoveDuration
          }
        }
      },
      yMove: {
        initial: {
          transform: {
            translateY: -transformation.diffTop
          }
        },
        animate: {
          transform: {
            translateY: 0,
            origin: origin,
            duration: duration
          }
        }
      },
      scale: {
        initial: {
          transform: {
            scale: 1 - transformation.diffScaleX
          }
        },
        animate: {
          transform: {
            scale: 1,
            origin: origin,
            duration: duration
          }
        }
      }
    });
  }, [expanded, transformation]);
  return /*#__PURE__*/React.createElement(Stage, {
    ref: containerRef,
    centered: true,
    overflowHidden: true
  }, /*#__PURE__*/React.createElement("div", {
    style: getBoxStyle(expanded)
  }, /*#__PURE__*/React.createElement(Transition, {
    active: true,
    effect: effects.xMove
  }, /*#__PURE__*/React.createElement(Transition, {
    active: true,
    effect: effects.yMove
  }, /*#__PURE__*/React.createElement(Transition, {
    active: true,
    effect: effects.scale
  }, /*#__PURE__*/React.createElement(DummyBox, {
    ref: elementRef,
    size: expanded ? 'medium' : 'small',
    onClick: function onClick() {
      return setExpanded(function (b) {
        return !b;
      });
    },
    color: "blue"
  }))))));
};

var getBoxStyle = function getBoxStyle(expanded) {
  if (!expanded) {
    return {
      position: 'absolute',
      right: 16,
      bottom: 16
    };
  }
};

CurvedMovement.parameters = {
  layout: 'centered'
};