"use strict";

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

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

var _native = _interopRequireDefault(require("styled-components/native"));

var _v = require("@native-base/v3");

var _styledSystem = require("styled-system");

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 NBSlide = ({
  children,
  in: animationState,
  duration = 500,
  placement = 'bottom',
  ...props
}) => {
  // TODO: Overiding placement props to bottom only, as other placement required implementation.
  placement = 'bottom';

  const [size, setSize] = _react.default.useState(10000);

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

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

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

  const slideOut = () => {
    _reactNative.Animated.timing(slideAnim, {
      toValue: 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 ? slideIn() : slideOut();
  return /*#__PURE__*/_react.default.createElement(_v.Box, {
    position: "absolute",
    overflow: "hidden",
    style: holderStyle[placement]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: animatioStyle[placement]
  }, /*#__PURE__*/_react.default.createElement(_v.Box, _extends({}, props, {
    onLayout: e => provideSize(e.nativeEvent.layout)
  }), children)));
};

const StyledSlide = (0, _native.default)(NBSlide)(_styledSystem.space, _styledSystem.layout, _styledSystem.border);
StyledSlide.defaultProps = {};

const Slide = ({
  children,
  ...props
}) => {
  return /*#__PURE__*/_react.default.createElement(StyledSlide, props, children);
};

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