import React, { ReactNode, useRef } from 'react'
import RcDialog from 'rc-dialog'

import { usePrefix } from '../ConfigProvider'
import { concat } from '../utils'
import { TipIcon } from '../icons'
import Mask from '../internal/Mask'
import { ModalProps } from '../Modal'
import { useModalProps } from '../Modal/hooks'
import { PopupContainerProvider } from '../PopupContainerProvider'

export interface Props extends Omit<ModalProps, 'title' | 'width'> {
  title?: ReactNode
  icon?: true | ReactNode
}

export default function Dialog(props: Props) {
  const { icon, title, children, ...modalProps } = props
  const prefix = usePrefix('dialog')

  const { maskProps, rcDialogProps: { footer, ...rcDialogProps } } = useModalProps({
    ...modalProps, children: undefined, title: undefined
  }, prefix)

  const iconPrefix = concat(prefix, 'body-icon')
  const mainPrefix = concat(prefix, 'body-main')
  const titlePrefix = concat(mainPrefix, 'title')
  const contentPrefix = concat(mainPrefix, 'content')
  const footerPrefix = concat(mainPrefix, 'footer')
  const popupContainerRef = useRef<HTMLDivElement>(null)

  const titleIcon = icon === true ? <TipIcon /> : icon

  return (
    <Mask {...maskProps}>
      <RcDialog {...rcDialogProps}>
        {titleIcon && <div className={iconPrefix}>{titleIcon}</div>}
        <div className={mainPrefix}>
          {title && <div className={titlePrefix}>{title}</div>}
          <div className={contentPrefix} ref={popupContainerRef}>
            <PopupContainerProvider containerRef={popupContainerRef}>{children}</PopupContainerProvider>
          </div>
          {
            footer && (
              <div className={footerPrefix}>
                {footer}
              </div>
            )
          }
        </div>
      </RcDialog>
    </Mask>
  )
}