"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _primitives = require("../../primitives");

var _theme = require("../../../theme");

var _reactNative = require("react-native");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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); }

const Slide = ({
  children,
  ...props
}) => {
  // TODO: Slide from right and left needs implmentation.
  const {
    in: animationState,
    delay,
    placement: pPlacement,
    duration
  } = (0, _theme.usePropsConfig)('Slide', props);
  let placement = pPlacement === 'top' ? 'top' : 'bottom';

  const [containerOpacity, setContainerOpacity] = _react.default.useState(1);

  const [size, setSize] = _react.default.useState(placement === 'top' ? -1000 : 1000);

  const provideSize = layoutSize => {
    if (placement === 'right' || placement === 'left') setSize(layoutSize.width);else setSize(layoutSize.height);
    setTimeout(() => {
      setContainerOpacity(1);
    }, duration);
  };

  const slideAnim = _react.default.useRef(new _reactNative.Animated.Value(size)).current;

  const slideIn = () => {
    _reactNative.Animated.timing(slideAnim, {
      delay,
      toValue: 0,
      duration: duration,
      useNativeDriver: true
    }).start();
  };

  const slideOut = () => {
    _reactNative.Animated.timing(slideAnim, {
      toValue: placement === 'top' ? -size : size,
      duration: duration,
      useNativeDriver: true
    }).start();
  };

  const holderStyle = {
    top: {
      top: 0,
      right: 0,
      left: 0
    },
    right: {
      right: 0,
      top: 0,
      bottom: 0
    },
    bottom: {
      bottom: 0,
      right: 0,
      left: 0
    },
    left: {
      left: 0,
      bottom: 0,
      top: 0
    }
  };
  const animatioStyle = {
    top: {
      transform: [{
        translateY: slideAnim
      }]
    },
    right: {
      transform: [{
        translateX: slideAnim
      }]
    },
    bottom: {
      transform: [{
        translateY: slideAnim
      }]
    },
    left: {
      transform: [{
        translateX: slideAnim
      }]
    }
  };
  animationState && size ? slideIn() : slideOut();
  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
    position: "absolute",
    overflow: "hidden",
    style: holderStyle[placement],
    opacity: containerOpacity
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: animatioStyle[placement]
  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, _extends({}, props, {
    onLayout: e => provideSize(e.nativeEvent.layout)
  }), children)));
};

var _default = Slide;
exports.default = _default;
//# sourceMappingURL=Slide.js.map