import React, { ReactNode, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { Box, Text, useViewport } from '@nova-hf/ui';

type ModalProps = {
  children: ReactNode;
  isActive: boolean;
  setIsActive: (isActive: boolean) => void;
};
const Modal = ({ children, isActive, setIsActive }: ModalProps) => {
  const [domNode, setDomNode] = useState<HTMLElement | undefined>(undefined);
  const { isSmall } = useViewport();

  useEffect(() => {
    const node = document.getElementById('appLayout');

    if (node) {
      setDomNode(node);
    }
  }, []);

  useEffect(() => {
    if (isActive) {
      document.body.style.overflow = 'hidden';

      const preventScroll = (e: Event) => e.preventDefault();

      document.body.addEventListener('wheel', preventScroll, { passive: false });
      document.body.addEventListener('touchmove', preventScroll, { passive: false });
      document.body.addEventListener('keydown', (e) => {
        // Disable arrow keys, space bar, etc. that trigger scrolling
        if (['ArrowUp', 'ArrowDown', 'Space', 'PageUp', 'PageDown'].includes(e.key)) {
          e.preventDefault();
        }
      });

      // Clean up when modal is closed
      return () => {
        document.body.style.overflow = 'auto';
        document.body.removeEventListener('wheel', preventScroll);
        document.body.removeEventListener('touchmove', preventScroll);
        document.body.removeEventListener('keydown', preventScroll);
      };
    }
  }, [isActive]);
  if (!domNode || !isActive) return null;

  return (
    <>
      {createPortal(
        <Box
          position="fixed"
          background="transparent"
          display="flex"
          justifyContent={'center'}
          alignItems={'center'}
          zIndex={'tooltip'}
          height="100%"
          width="100%"
          style={{ backdropFilter: 'blur(10px) brightness(60%)' }}
          padding={{ sm: 0, lg: 20 }}
        >
          <Box
            height={{ sm: '100%', md: 'fitContent' }}
            width={{ sm: '100%', lg: '6/12' }}
            position="absolute"
            display="flex"
            flexDirection={'column'}
            alignItems={{ sm: 'center' }}
            backgroundColor="white"
            paddingX={4}
            paddingY={{ sm: 10, lg: 4 }}
            style={{
              borderRadius: '16px',
              ...(isSmall && {
                height: '100vh',
              }),
            }}
            maxWidth={{ md: '7/12' }}
          >
            <Box display="flex" width="100%" justifyContent={{ sm: 'flex-end' }}>
              <Box
                renderAs="button"
                onClick={() => setIsActive(false)}
                cursor={{ hover: 'pointer' }}
                display={{ sm: 'flex' }}
                justifyContent="center"
                alignItems="center"
                borderRadius={'large'}
                backgroundColor="grey200"
                height={4}
                width={4}
                padding={1}
                fontSize={16}
                color="grey600"
                fontWeight="bold"
              >
                x
              </Box>
            </Box>
            <Box
              display="flex"
              style={{
                borderRadius: '16px',
                ...(isSmall && {
                  height: '100vh',
                }),
              }}
              flexDirection="column"
              justifyContent="center"
              width="100%"
            >
              {children}
            </Box>
          </Box>
        </Box>,
        domNode,
      )}
    </>
  );
};

type ModalHeaderProps = {
  title: string;
  subtitle: string;
};
export const Header = ({ title, subtitle }: ModalHeaderProps) => (
  <Box marginLeft={3}>
    <Text variant="h3" color="pink">
      {title}
    </Text>
    <Text variant="pMediumRegular" marginTop={1} marginBottom={5} color="grey500">
      {subtitle}
    </Text>
  </Box>
);

Modal.Header = Header;
export default Modal;