import React, { ReactNode, useRef } from 'react'

import Button from '../Button'
import { useLangData } from '../ConfigProvider'
import { concat } from '../utils'
import { TipIcon } from '../icons'
import { PopupContainerProvider } from '../PopupContainerProvider'
import { PopoverButtons, PopoverProps } from '.'

export type InnerProps = Pick<PopoverProps, 'title' | 'content'> & {
  prefix: string
  icon?: true | ReactNode
  buttons?: true | PopoverButtons
  close(): void
}

export default function Inner({ icon, title, content, prefix, buttons, close }: InnerProps) {
  const iconPrefix = concat(prefix, 'icon')
  const mainPrefix = concat(prefix, 'main')
  const titlePrefix = concat(mainPrefix, 'title')
  const contentPrefix = concat(mainPrefix, 'content')
  const btnsPrefix = concat(mainPrefix, 'btns')
  const ref = useRef<HTMLDivElement>(null)

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

  return (
    <>
      {icon && <div className={iconPrefix}>{icon}</div>}
      <div className={mainPrefix}>
        {title && <div className={titlePrefix}>{title}</div>}
        <div className={contentPrefix} ref={ref}>
          <PopupContainerProvider containerRef={ref}>
            {content}
          </PopupContainerProvider>
        </div>
        {buttons && <Buttons prefix={btnsPrefix} close={close} {...(buttons === true ? {} : buttons)} />}
      </div>
    </>
  )
}

type ButtonsProps = PopoverButtons & {
  prefix?: string
  close(): void
}

function Buttons(props: ButtonsProps) {
  const langData = useLangData('modal')
  const {
    prefix, onCancel, onOk, cancelButtonProps, okButtonProps,
    cancelText = langData.cancelText,
    okText = langData.okText,
    close
  } = props

  function handleCancel(event: React.MouseEvent<HTMLButtonElement>) {
    close()
    onCancel?.(event)
  }

  function handleOk(event: React.MouseEvent<HTMLButtonElement>) {
    close()
    onOk?.(event)
  }

  return (
    <div className={prefix}>
      <Button type="primary" size="small" onClick={handleOk} {...okButtonProps}>{okText}</Button>
      <Button size="small" onClick={handleCancel} {...cancelButtonProps}>{cancelText}</Button>
    </div>
  )
}