function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { forwardRef } from 'react';
import { Animated } from 'react-native';
import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
const transformStylesMap = {
  translateY: true,
  translateX: true,
  scale: true,
  scaleX: true,
  scaleY: true,
  rotate: true
};
const defaultStyles = {
  opacity: 1,
  translateY: 0,
  translateX: 0,
  scale: 1,
  scaleX: 1,
  scaleY: 1,
  rotate: '0deg'
};

const getAnimatedStyles = animateValue => (initial, to) => {
  const styles = {
    transform: []
  };

  for (let key in initial) {
    if (key === 'transition') {
      continue;
    }

    if (key in transformStylesMap) {
      var _styles$transform;

      (_styles$transform = styles.transform) === null || _styles$transform === void 0 ? void 0 : _styles$transform.push({
        [key]: animateValue.interpolate({
          inputRange: [0, 1],
          outputRange: [initial[key], to[key]]
        })
      });
    } else {
      styles[key] = animateValue.interpolate({
        inputRange: [0, 1],
        outputRange: [initial[key], to[key]]
      });
    }
  }

  return styles;
};

const defaultTransitionConfig = {
  type: 'timing',
  useNativeDriver: true,
  duration: 250,
  delay: 0
};
export const Transition = /*#__PURE__*/forwardRef(({
  children,
  onTransitionComplete,
  visible = false,
  initial,
  animate,
  exit,
  style,
  as,
  ...rest
}, ref) => {
  const animateValue = React.useRef(new Animated.Value(0)).current;
  const Component = React.useMemo(() => {
    if (as) {
      return Animated.createAnimatedComponent(as);
    }

    return Animated.View;
  }, [as]);
  const [animationState, setAnimationState] = React.useState(visible ? 'entering' : 'exited');
  const prevVisible = React.useRef(visible);
  React.useEffect(function startEntryTransition() {
    var _animate;

    const entryTransition = { ...defaultTransitionConfig,
      ...((_animate = animate) === null || _animate === void 0 ? void 0 : _animate.transition)
    };

    if (visible) {
      var _entryTransition$type;

      Animated.sequence([// @ts-ignore - delay is present in defaultTransitionConfig
      Animated.delay(entryTransition.delay), Animated[(_entryTransition$type = entryTransition.type) !== null && _entryTransition$type !== void 0 ? _entryTransition$type : 'timing'](animateValue, {
        toValue: 1,
        useNativeDriver: true,
        ...entryTransition
      })]).start(() => {
        setAnimationState('entered');
      });
    }
  }, [visible, onTransitionComplete, animateValue, animate]);
  React.useEffect(() => {
    // Exit request
    if (prevVisible.current !== visible && !visible) {
      setAnimationState('exiting');
    }

    prevVisible.current = visible;
  }, [visible]);
  React.useEffect(function startExitTransition() {
    const exitTransition = { ...defaultTransitionConfig,
      ...(exit === null || exit === void 0 ? void 0 : exit.transition)
    };

    if (animationState === 'exiting') {
      var _exitTransition$type;

      Animated.sequence([// @ts-ignore - delay is present in defaultTransitionConfig
      Animated.delay(exitTransition.delay), Animated[(_exitTransition$type = exitTransition.type) !== null && _exitTransition$type !== void 0 ? _exitTransition$type : 'timing'](animateValue, {
        toValue: 0,
        useNativeDriver: true,
        ...exitTransition
      })]).start(() => {
        setAnimationState('exited');
      });
    }
  }, [exit, onTransitionComplete, setAnimationState, animationState, animateValue]); // If exit animation is present and state is exiting, we replace 'initial' with 'exit' animation

  initial = animationState === 'exiting' && exit ? { ...defaultStyles,
    ...exit
  } : { ...defaultStyles,
    ...initial
  };
  animate = { ...defaultStyles,
    ...animate
  };
  const styles = React.useMemo(() => {
    return [getAnimatedStyles(animateValue)(initial, animate), style];
  }, [animateValue, initial, animate, style]);
  React.useEffect(() => {
    if (animationState === 'exited') {
      onTransitionComplete && onTransitionComplete('exited');
    } else if (animationState === 'entered') {
      onTransitionComplete && onTransitionComplete('entered');
    }
  }, [animationState, onTransitionComplete]); //TODO: refactor for responsive prop

  if (useHasResponsiveProps(rest)) {
    return null;
  }

  return /*#__PURE__*/React.createElement(Component, _extends({
    pointerEvents: "box-none" // https://github.com/facebook/react-native/issues/23090#issuecomment-710803743
    ,
    needsOffscreenAlphaCompositing: true,
    style: styles,
    ref: ref
  }, rest), children);
});
//# sourceMappingURL=Transition.js.map