import React, { useEffect, ReactNode } from 'react';
import { createPortal } from 'react-dom';
import './modal.scss';
import Icon from '../Icon';
import { colors } from '../../colors/colorConstants';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;

  /*** label value for aria-label  */
  contentLabel?: string;

  /*** default header will be provided with title and close icon. */
  defaultHeader?: boolean;

  /*** Title to be displayed in the header when defaultHeader is true*/
  headerTitle?: string;

  /*** Optional content to be displayed on the right side of the header when defaultHeader is true */
  headerRightContent?: ReactNode;

  /*** Custom styles for the overlay and content */
  style?: {
    overlay?: React.CSSProperties;
    content?: React.CSSProperties;
  };

  /*** Custom class names for the modal content */
  contentClassName?: string;

  /*** Custom class name for the overlay */
  overlayClassName?: string;

  /*** Whether the modal should close when the 'Escape' key is pressed */
  shouldCloseOnEsc?: boolean;

  /*** Whether to hide the app from screen readers when the modal is open */
  ariaHideApp?: boolean; //for screen readers

  /*** Whether the modal should close when clicking outside of it (on the overlay) */
  shouldCloseOnOverlayClick?: boolean;
  //   shouldFocusAfterRender?: boolean;
  //   shouldReturnFocusAfterClose?: boolean;

  /***Content to be displayed inside the modal */
  children: ReactNode;
}
interface CloseIconCompProps {
  onClose: () => void;
}
const CloseIconComp = ({ onClose }: CloseIconCompProps) => (
  <Icon
    name="toast_close_icon_hover"
    color={colors.white}
    height={14}
    width={14}
    className="ff-modal-close-icon"
    onClick={onClose}
  />
);
const Modal: React.FC<ModalProps> = ({
  isOpen,
  onClose,
  contentLabel,
  defaultHeader = false,
  headerTitle = 'Title',
  headerRightContent = <CloseIconComp onClose={onClose} />,
  style = {},
  contentClassName,
  overlayClassName,
  shouldCloseOnEsc = true,
  ariaHideApp = true,
  shouldCloseOnOverlayClick = true,
  // shouldFocusAfterRender = true,
  //  shouldReturnFocusAfterClose = true,
  children,
}) => {
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && shouldCloseOnEsc) {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener('keydown', handleKeyDown);
      if (ariaHideApp) {
        document.body.style.overflow = 'hidden';
      }
    }
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
      if (ariaHideApp) {
        document.body.style.overflow = '';
      }
    };
  }, [isOpen, onClose, ariaHideApp, shouldCloseOnEsc]);

  if (!isOpen) return null;

  return createPortal(
    <div
      className={`ff-modal-overlay ${overlayClassName || ''}`}
      style={style.overlay}
      onClick={shouldCloseOnOverlayClick ? onClose : undefined}
    >
      <div
        className={`ff-modal-content ${contentClassName || ''}`}
        style={style.content}
        onClick={(e) => e.stopPropagation()}
        aria-label={contentLabel}
      >
        {defaultHeader && (
          <div className="ff-modal-header">
            <div className="ff-modal-header-title">{headerTitle}</div>
            <div>{headerRightContent}</div>
          </div>
        )}
        {children}
      </div>
    </div>,
    document.body
  );
};

export default Modal;