import React, { useCallback, useEffect, useMemo, useRef } from 'react'
import {
  StyledContent,
  StyledOverlay,
  StyledTitle,
  StyledWrapper
} from './Modal.theme'

import Heading from '../../atoms/Heading'
import { IModal } from './Modal.interface'
import Icon from '../../atoms/Icon'
import IconTitle from '../IconTitle/IconTitle.component'
import PortalComponent from '../../common/PortalComponent'
import { getId } from '@/helpers/uuid'

const Modal = ({
  title,
  open = false,
  onClose,
  hideCloseIcon = false,
  children,
  allowClickAway = true,
  allowScroll = false,
  allowEsc = true,
  ...props
}: IModal) => {
  const wrapperId = useMemo(() => getId(), [])

  const handleCloseClick = (e: any) => {
    e.preventDefault()

    if (typeof onClose == 'function' && allowClickAway) onClose()
  }
  useEffect(() => {
    if (!allowScroll && open) {
      document.body.style.overflow = 'hidden'
    }

    return () => {
      document.body.style.overflow = ''
    }
  }, [open, allowScroll])

  const offCanvasRef = useRef<HTMLDivElement | null>(null)

  const onClickOutside = useCallback(
    (event: MouseEvent) => {
      if (!allowClickAway) return
      const offCanvasElement = offCanvasRef.current
      if (
        offCanvasElement &&
        !offCanvasElement.contains(event.target as Node) &&
        open
      ) {
        if (onClose) onClose()
      }
    },
    [allowClickAway, open, onClose]
  )


  const onEscKey = useCallback(
    (event: KeyboardEvent) => {
      if (!allowEsc) return
      if (event.key === 'Escape' && open) {
        if (onClose) onClose()
      }
    },
    [allowEsc, open, onClose]
  )


  useEffect(() => {
    const handleMouseDown = (event: MouseEvent) => onClickOutside(event)
    const handleKeyDown = (event: KeyboardEvent) => onEscKey(event)

    // Attach the event listeners when the component mounts
    document.addEventListener('mousedown', handleMouseDown)
    document.addEventListener('keydown', handleKeyDown)

    // Detach the event listeners when the component unmounts
    return () => {
      document.removeEventListener('mousedown', handleMouseDown)
      document.removeEventListener('keydown', handleKeyDown)
    }
  }, [onClickOutside, onEscKey])

  useEffect(() => {
    if (!allowScroll && open) {
      document.body.style.overflow = 'hidden'
    }

    return () => {
      document.body.style.overflow = ''
    }
  }, [open, allowScroll])

  if (!open) return null


  return (
    <PortalComponent wrapperId={wrapperId}>
      <StyledOverlay onClick={(e: any) => handleCloseClick(e)} />
      <StyledWrapper {...props}>
        <StyledTitle className="d-flex align-items-center">
          {title && (
            <div className="flex-grow-1">
              <IconTitle
                icon={
                  <Icon
                    icon="icon-product"

                  />
                }
              >
                <Heading tag="span" size="texts" className="fw-semibold">
                  {title}
                </Heading>
              </IconTitle>
            </div>
          )}
          <div style={{ cursor: 'pointer', padding: '4px 0' }} onClick={() => onClose && onClose()}>
            {!hideCloseIcon && (
              <Icon
                icon="icon-close"
                className="flex-shrink-1"
                onClick={() => onClose && onClose()}
              />
            )}
          </div>
        </StyledTitle>
        <StyledContent>{children}</StyledContent>
      </StyledWrapper>
    </PortalComponent>
  )
}

export default Modal