import React, { ReactNode, ReactElement, forwardRef } from 'react';
import css from '../../utils/css';
import { ModalBody as StyledModalBody } from './StyledModal';
import ModalContext, { ModalContextType } from './ModalContext';
import { CommonProps } from '../common';

interface ModalBodyProps extends CommonProps {
  /**
   * Modal body content.
   */
  children: ReactNode;
}

const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(
  (
    {
      children,
      id,
      className,
      style,
      sx = {},
      'data-test-id': dataTestId,
    }: ModalBodyProps,
    forwardedRef
  ): ReactElement => {
    const { isPopupModal } = React.useContext(ModalContext) as ModalContextType;
    return (
      <StyledModalBody
        themeIsPopUp={isPopupModal}
        id={id}
        className={className}
        style={{ ...style, ...css(sx) }}
        data-test-id={dataTestId}
        ref={forwardedRef}
      >
        {children}
      </StyledModalBody>
    );
  }
);

ModalBody.displayName = 'ModalBody';

export default ModalBody;