import React from "react"
import { Transition } from "react-transition-group"
import clsx from "clsx"

import { BackdropProps } from "./interface"
import "./styles/index.css"

/**
 * 蒙版组件用于特定元素或其部分的强调。
 *
 *
 * ### 引用方法
 * ```tsx
 * import { Backdrop } from "@atomintl/exchange-ui"
 * ```
 */
const Backdrop: React.FC<BackdropProps> = props => {
  const {
    open,
    hideBackdrop,
    timeout,
    unmountOnExit,
    children,
    className = "",
    ...rest
  } = props as PickRequired<BackdropProps, "open" | "hideBackdrop" | "timeout" | "unmountOnExit">

  return (
    <Transition in={open} timeout={timeout} unmountOnExit={unmountOnExit}>
      {state => (
        <div
          className={clsx(
            `nts-backdrop-root nts-backdrop-${hideBackdrop && open ? "hideBackdrop" : state} ${className}`
          )}
          {...rest}
        >
          {children}
        </div>
      )}
    </Transition>
  )
}

Backdrop.defaultProps = {
  open: false,
  hideBackdrop: false,
  timeout: 300,
  unmountOnExit: true
}

export { BackdropProps } from "./interface"
export default Backdrop