import React from "react";
import { TransitionProps } from "react-transition-group/Transition";
import { slide, Position } from "../_util/transition";
import { BaseTransition } from "./BaseTransition";

export interface SlideTransitionProps extends Partial<TransitionProps> {
  /**
   * 从哪个位置进入，相对 DOM 本身的位置 [x, y]。默认为 [0, -30]
   */
  from?: Position;

  /**
   * 消失到哪个位置，默认和 from 相等
   */
  to?: Position;
}

export function SlideTransition({
  from,
  to,
  timeout,
  ...rest
}: SlideTransitionProps) {
  let enterTimeout: number;
  let exitTimeout: number;
  if (typeof timeout === "number") {
    enterTimeout = timeout;
    exitTimeout = timeout;
  } else if (timeout && typeof timeout === "object") {
    enterTimeout = timeout.enter;
    exitTimeout = timeout.exit;
  }
  return (
    <BaseTransition {...slide(from, to, enterTimeout, exitTimeout)} {...rest} />
  );
}

SlideTransition.displayName = "SlideTransition";