import * as React from 'react';
import { HoverPreview } from './HoverPreview';
import {
  getHeaderFooterClassName,
  getContentClassName,
  getHeaderTextClassName,
  getSecondaryTextClassName,
  getBorderClassName,
  getIconClassName,
  getAvatarImageClassName,
} from '../utils/hoverPreviewUtils';

interface PostHoverPreviewProps {
  children: React.ReactNode;
  postTitle: string;
  postThumbnailPath?: string;
  postThumbnailAlt?: string;
  postDomainIcon?: string;
  creatorName?: string;
  creatorAvatarPath?: string;
}

export const PostHoverPreview: React.FC<PostHoverPreviewProps> = ({
  children,
  postTitle,
  postThumbnailPath,
  postThumbnailAlt,
  postDomainIcon,
  creatorName,
  creatorAvatarPath,
}) => {
  // Force eager loading of images
  React.useEffect(() => {
    // Preload post thumbnail
    if (postThumbnailPath) {
      const thumbnailImg = new Image();
      thumbnailImg.src = postThumbnailPath;
    }

    // Preload creator avatar
    if (creatorAvatarPath) {
      const avatarImg = new Image();
      avatarImg.src = creatorAvatarPath;
    }
  }, [postThumbnailPath, creatorAvatarPath]);

  // Add extra classes for PostHoverPreview's header/footer
  const postHeaderFooterClassName = `${getHeaderFooterClassName()} justify-between p-3`;

  const previewContent = (
    <>
      {/* Header: Title */}
      <div className={postHeaderFooterClassName}>
        <span className={getHeaderTextClassName()} title={postTitle}>
          {postTitle}
        </span>
      </div>

      {/* Image Content */}
      <div
        className={`flex items-center justify-center ${getContentClassName()} p-2`}
      >
        {postThumbnailPath ? (
          <div className="transition-transform hover:scale-[1.02]">
            <img
              src={postThumbnailPath}
              alt={postTitle}
              className={`max-h-[250px] max-w-full rounded-md ${getBorderClassName()} object-contain shadow-md`}
              loading="eager"
            />
          </div>
        ) : (
          <span className={`block px-4 py-6 ${getSecondaryTextClassName()}`}>
            {postThumbnailAlt || 'No file available'}
          </span>
        )}
      </div>

      {/* Footer: Domain icon & Creator */}
      {creatorName && (
        <div className={postHeaderFooterClassName}>
          <span className="flex items-center gap-2 justify-self-end">
            {creatorAvatarPath && (
              <img
                src={creatorAvatarPath}
                alt={creatorName}
                className={getAvatarImageClassName('small')}
              />
            )}
            <span
              className="truncate text-xs font-medium text-slate-700"
              title={creatorName}
            >
              {creatorName}
            </span>
          </span>
          {(postDomainIcon && (
            <img
              src={postDomainIcon}
              alt={postTitle}
              className={getIconClassName()}
            />
          )) || (
            <span className="h-6 w-6 grow rounded-md shadow-sm ring-blue-200"></span>
          )}
        </div>
      )}
    </>
  );

  return (
    <HoverPreview
      children={children}
      previewContent={previewContent}
      maxWidth="300px"
      maxHeight="500px"
    />
  );
};

export default PostHoverPreview;
