'use client';

/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import { Tooltip } from '@chakra-ui/react';
import { ReactNode, useState } from 'react';
import ReactDOM from 'react-dom';

import { TOOLTIP_BACKGROUND_RESKIN } from '@/utils/constants';

interface DisabledTooltipProps {
  isDisabled: boolean;
  tooltipLabel: string;
  children: ReactNode;
  onClick?: () => void;
  isMobile?: boolean;
}

const DisabledTooltip = ({
  isDisabled,
  tooltipLabel,
  children,
  onClick,
  isMobile = false,
}: DisabledTooltipProps) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleClick = (event: React.MouseEvent | React.TouchEvent) => {
    event.preventDefault();
    event.stopPropagation();
    onClick?.();
    setIsOpen(false);
  };

  const content = (
    <div className='w-full cursor-pointer' style={{ pointerEvents: 'auto' }}>
      {children}
    </div>
  );

  if (!isDisabled) {
    return <>{children}</>;
  }

  if (isMobile) {
    return (
      <>
        <div
          style={{ width: '100%' }}
          onMouseEnter={() => setIsOpen(true)}
          onMouseLeave={() => setIsOpen(false)}
          onClick={() => setIsOpen(true)}
        >
          {content}
        </div>
        {isOpen &&
          ReactDOM.createPortal(
            <div
              style={{
                position: 'fixed',
                bottom: '90px',
                left: '50%',
                transform: 'translateX(-50%)',
                backgroundColor: TOOLTIP_BACKGROUND_RESKIN,
                color: '#ffffff',
                borderRadius: '8px',
                padding: '10px',
                maxWidth: '95%',
                width: '95%',
                textAlign: 'center',
                zIndex: 9999,
              }}
              onClick={handleClick}
              onTouchEnd={handleClick}
            >
              {tooltipLabel}
            </div>,
            document.body
          )}
      </>
    );
  }

  return (
    <Tooltip
      label={tooltipLabel}
      bg={TOOLTIP_BACKGROUND_RESKIN}
      color='#ffffff'
      borderRadius='md'
      padding='10px'
    >
      {content}
    </Tooltip>
  );
};

export default DisabledTooltip;