import {
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalHeader,
  ModalOverlay,
  Popover,
  PopoverArrow,
  PopoverBody,
  PopoverCloseButton,
  PopoverContent,
} from '@chakra-ui/react';
import React, { Ref, useEffect, useRef } from 'react';

import Link from '@/components/link/Link';
import { useBreakpointMd } from '@/hooks/useBreakpoint';
import { WandIcon } from '@/icons';
import { TOOLTIP_BACKGROUND, glassmorphicEffect } from '@/utils/constants';

interface UploadAudioPopoverProps {
  isOpen: boolean;
  onClose: () => void;
  onOpen: () => void;
  buttonRef: Ref<any>;
  topMargin?: number;
}

const UploadAudioPopover: React.FC<UploadAudioPopoverProps> = ({
  isOpen,
  onClose,
  buttonRef,
  topMargin = 0,
}) => {
  const isMobile = !useBreakpointMd();

  const popoverRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as Node;

      if (popoverRef.current && !popoverRef.current.contains(target)) {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener('mousedown', handleClickOutside);
    } else {
      document.removeEventListener('mousedown', handleClickOutside);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isOpen, onClose]);

  if (isMobile) {
    return (
      <Modal isOpen={isOpen} onClose={onClose} isCentered>
        <ModalOverlay />
        <ModalContent sx={{ ...glassmorphicEffect }}>
          <ModalHeader>
            <div className='flex flex-row items-center'>
              <p className='mr-2'>You&apos;re one step closer</p> <WandIcon />
            </div>
          </ModalHeader>
          <ModalCloseButton />
          <ModalBody fontSize='sm' mb={4}>
            You must be a Pro or Premier subscriber to upload your own audio.
            Subscribe{' '}
            <Link className='underline' href='/account'>
              here
            </Link>
            .
          </ModalBody>
        </ModalContent>
      </Modal>
    );
  } else {
    return (
      <Popover isOpen={isOpen} onClose={onClose} placement='bottom'>
        <PopoverContent
          ref={popoverRef}
          background={TOOLTIP_BACKGROUND}
          fontSize='sm'
          backdropFilter='blur(40px)'
          rounded='md'
          display={isOpen ? 'block' : 'none'}
          color='#ffffff'
          p='10px'
          width={'310px'}
          left={`${(buttonRef as any)?.current?.getBoundingClientRect().left - 310}px`}
          top={`${(buttonRef as any)?.current?.getBoundingClientRect().top - 60 + topMargin}px`}
        >
          <PopoverArrow />
          <PopoverCloseButton />
          <PopoverBody>
            You must be a Pro or Premier subscriber to upload your own audio.
            Subscribe{' '}
            <Link className='underline' href='/account'>
              here
            </Link>
          </PopoverBody>
        </PopoverContent>
      </Popover>
    );
  }
};

export default UploadAudioPopover;