import * as React from 'react';
import useReducedMotion from '../utils/useReducedMotion';
var MIN_POPUP_WIDTH = 120;
var ANIMATE_CLASSNAME = 'sg-animate-on-transforms';
var EXIT_STATE_CLASSNAME = 'exit-state';
var SCROLL_HIDE_CLASSNAME = 'hide-scroll';
var OPEN_CLASSNAME = 'open';
var MINIMAL_POPUP_TO_INPUT_RATIO = 0.7;

var useSelectMenuAnimations = function useSelectMenuAnimations(props) {
  var selectId = props.selectId,
      popupClassName = props.popupClassName,
      popupContentClassName = props.popupContentClassName,
      floatingContainerClassName = props.floatingContainerClassName,
      selectElementClassName = props.selectElementClassName;
  var initialElementRef = React.useRef();
  var selectRef = React.useRef();
  var hasReduceMotion = useReducedMotion();

  var animateExit = function animateExit(_ref) {
    var callback = _ref.callback;

    try {
      var select = document.getElementById(selectId);
      var popupContainer = select.getElementsByClassName(popupClassName)[0];
      var floatingContainer = select.getElementsByClassName(floatingContainerClassName)[0];
      var popupContent = select.getElementsByClassName(popupContentClassName)[0];
      popupContainer.style.opacity = "0";
      popupContainer.style.height = "0px";
      if (selectRef.current) popupContainer.style.width = "".concat(selectRef.current.width, "px");
      popupContent.classList.add(SCROLL_HIDE_CLASSNAME);
      popupContainer.classList.add(EXIT_STATE_CLASSNAME);
      floatingContainer.classList.add(EXIT_STATE_CLASSNAME);
      requestAnimationFrame(function () {
        if (callback) callback();
      });
    } catch (_unused) {}
  };

  var animateEntry = function animateEntry() {
    // Wait for the next frame
    // so we allow the floating container to apply all flip styles
    requestAnimationFrame(function () {
      var select = document.getElementById(selectId);
      if (!select) return;
      var floatingContainer = select.getElementsByClassName(floatingContainerClassName)[0];
      var popupContainer = select.getElementsByClassName(popupClassName)[0];
      var popupContent = select.getElementsByClassName(popupContentClassName)[0];
      var selectElement = select.getElementsByClassName(selectElementClassName)[0]; // Register desired position

      initialElementRef.current = floatingContainer.getBoundingClientRect();
      selectRef.current = selectElement.getBoundingClientRect();
      var initialContainerSize = initialElementRef.current;
      var selectElementSize = selectRef.current;
      popupContent.style.width = "".concat(initialContainerSize.width, "px");
      popupContent.style.height = "".concat(initialContainerSize.height, "px");
      popupContent.classList.add(SCROLL_HIDE_CLASSNAME); // Popup width at the start of animation
      // should be the same as element select width

      popupContainer.style.width = "".concat(selectElementSize.width, "px");
      popupContainer.style.height = "0px"; // Reset the popup and container to the pre-appear position

      floatingContainer.classList.add(EXIT_STATE_CLASSNAME);
      popupContainer.classList.add(EXIT_STATE_CLASSNAME); // Wait for the next frame so we
      // know all the style changes have
      // taken hold.

      requestAnimationFrame(function () {
        floatingContainer.classList.remove(EXIT_STATE_CLASSNAME);
        popupContainer.classList.remove(EXIT_STATE_CLASSNAME);
        floatingContainer.classList.add(OPEN_CLASSNAME);
        popupContainer.classList.add(ANIMATE_CLASSNAME);
        floatingContainer.classList.add(ANIMATE_CLASSNAME);
        popupContainer.style.height = "".concat(initialContainerSize.height, "px");
        var popupWidth = Math.max(initialContainerSize.width, selectElementSize.width * MINIMAL_POPUP_TO_INPUT_RATIO, MIN_POPUP_WIDTH);
        popupContainer.style.width = "".concat(popupWidth, "px");
        popupContent.style.width = "".concat(popupWidth, "px"); // Ensure manipulating popup height doesn't affect the floating container

        floatingContainer.style.height = "".concat(initialContainerSize.height, "px");
        floatingContainer.style.width = "".concat(Math.max(initialContainerSize.width, popupWidth), "px");
        var selectedElement = select.querySelector('[aria-selected=true]'); // Scroll to selected element if any

        if (selectedElement && popupContent) {
          var elementRect = selectedElement.getBoundingClientRect();
          var popupRect = popupContent.getBoundingClientRect();
          var scrollAmount = elementRect.top - popupRect.top - popupRect.height / 2;
          popupContent.scroll({
            top: scrollAmount
          });
        }

        var cleanupAfterTransition = function cleanupAfterTransition(popupContent) {
          popupContent.classList.remove(SCROLL_HIDE_CLASSNAME);
        };

        var handleTransitionEnd = function handleTransitionEnd(e) {
          // Once height finishes transition
          // we are sure the component is fully visible
          if (e.propertyName === 'height') {
            cleanupAfterTransition(popupContent);
            popupContainer.removeEventListener('transitionend', handleTransitionEnd);
          }
        };

        popupContainer.addEventListener('transitionend', handleTransitionEnd);

        if (hasReduceMotion) {
          cleanupAfterTransition(popupContent);
        }
      });
    });
  };

  return {
    animateEntry: animateEntry,
    animateExit: animateExit
  };
};

export default useSelectMenuAnimations;