/* eslint-disable react/forbid-dom-props */
/* eslint-disable react/forbid-component-props */
import React, { CSSProperties, useCallback, useEffect, useRef } from 'react';

import { DialogBox } from './Dialog.styled';
import { FloatingUIDialog, FloatingUIDialogContent } from './FloatingUIDialog';

export { DialogBox } from './Dialog.styled';

type DialogProps = React.PropsWithChildren<{
  contentContainerStyles?: CSSProperties;
  onClose?: () => void;
  open: boolean;
  unboxed?: boolean;
}>;

export const Dialog: React.FunctionComponent<DialogProps> = ({
  open,
  onClose,
  children,
  unboxed,
  contentContainerStyles,
}) => {
  const dialogRef = useRef<HTMLDivElement>(null);

  const handleOpenChange = useCallback(
    (newOpen: boolean) => {
      if (newOpen) {
        return;
      }

      typeof onClose === 'function' && onClose();
    },
    [onClose],
  );

  useEffect(() => {
    if (!open || !dialogRef.current) {
      return undefined;
    }

    const timeoutId = window.setTimeout(() => {
      const firstInput = dialogRef.current?.querySelector('input');

      if (firstInput) {
        firstInput.focus();
        return;
      }

      const firstButton = dialogRef.current?.querySelector('button');

      if (firstButton) {
        firstButton.focus();
      }
    }, 250);

    return () => {
      window.clearTimeout(timeoutId);
    };
  }, [open]);

  if (!children) {
    return null;
  }

  return (
    <FloatingUIDialog open={open} onOpenChange={handleOpenChange}>
      <FloatingUIDialogContent onOverlayClose={onClose}>
        {unboxed ? (
          <div ref={dialogRef} data-testid="Dialog-DialogBox" style={contentContainerStyles}>
            {children}
          </div>
        ) : (
          <DialogBox ref={dialogRef} data-testid="Dialog-DialogBox" style={contentContainerStyles}>
            {children}
          </DialogBox>
        )}
      </FloatingUIDialogContent>
    </FloatingUIDialog>
  );
};