import { Global, useTheme } from '@emotion/react';
import React, { useEffect } from 'react';
import { Popover as TinyPopover, PopoverProps as TinyPopoverProps } from 'react-tiny-popover';

import {
  globalReactTinyPopoverContainerCSS,
  TINY_POPOVER_CONTAINER_CLASS_NAME,
} from './Popover.styled';

type PopoverProps = {
  align?: TinyPopoverProps['align'];
  children: TinyPopoverProps['children'];
  containerClassName?: TinyPopoverProps['containerClassName'];
  containerStyle?: TinyPopoverProps['containerStyle'];
  content: TinyPopoverProps['content'];
  'data-testid'?: string;
  isOpen: TinyPopoverProps['isOpen'];
  onClickOutside: TinyPopoverProps['onClickOutside'];
};

export const Popover: React.FunctionComponent<PopoverProps> = ({
  children,
  content,
  isOpen,
  onClickOutside,
  'data-testid': dataTestId,
  align,
  containerClassName,
  containerStyle,
}) => {
  const theme = useTheme();

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape' && isOpen) {
        onClickOutside?.({} as MouseEvent);
      }
    };

    document.addEventListener('keydown', handleKeyDown);

    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [isOpen, onClickOutside]);

  return (
    <>
      {containerClassName ? null : <Global styles={globalReactTinyPopoverContainerCSS(theme)} />}
      <TinyPopover
        align={align || 'start'}
        containerClassName={containerClassName || TINY_POPOVER_CONTAINER_CLASS_NAME}
        containerStyle={containerStyle}
        content={content}
        data-testid={dataTestId}
        isOpen={isOpen}
        positions={['bottom', 'top']}
        reposition={true}
        onClickOutside={onClickOutside}
      >
        {children}
      </TinyPopover>
    </>
  );
};