import React from 'react'

import { Box } from '../box'
import { useStyleConfig, vui } from '../core'
import { cs, isJsx } from '../utils'
import { useDialogContext } from './context'
import { DialogFooterProps } from './dialog.types'
import DialogCancelButton from './dialogCancelButton'
import DialogSubmitButton from './dialogSubmitButton'

/** Shows control buttons below the Dialog Body. By default includes cancel and submit buttons. */
export const DialogFooter = vui<'div', DialogFooterProps>((props, ref) => {
  const { cancelButton, children, className, submitButton, ...rest } = props
  const styles = useStyleConfig('Dialog', useDialogContext())

  return (
    <Box
      className={cs('vui-dialogFooter', className)}
      justifyContent="flex-end"
      p={3}
      pt={2}
      ref={ref}
      {...styles.footer}
      {...rest}
    >
      {children ?? (
        <>
          {isJsx(cancelButton) ? cancelButton : cancelButton && <DialogCancelButton {...cancelButton} />}

          {isJsx(submitButton) ? submitButton : submitButton && <DialogSubmitButton {...submitButton} />}
        </>
      )}
    </Box>
  )
})

DialogFooter.displayName = 'DialogFooter'
export default DialogFooter
