import React from 'react';

import { forwardRef } from '../../utils/forwardRef';

import { PreviewBase } from './PreviewBase';

export interface PreviewImageVisualProps {
  /**
   * Width of the thumbnail image.
   */
  thumbnailWidth?: number;
}

const usePreviewImageVisuals = ({ thumbnailWidth = 30 }: PreviewImageVisualProps) => {
  return {
    thumbnailProps: {
      className: 'preview__thumbnail',
      style: { width: thumbnailWidth },
    },
    imageProps: {
      className: 'preview__image',
    },
  };
};

/** @inheritdoc */
export interface PreviewImageProps extends PreviewImageVisualProps {
  /**
   * Source of the thumbnail image.
   */
  thumbnailSrc: string;
  /**
   * Source of the full image.
   */
  src: string;
  /**
   * Alt text for the image.
   */
  alt: string;
}

export const PreviewImage = forwardRef(function PreviewImage(
  { src, thumbnailSrc, thumbnailWidth = 30, alt, ...restProps }: PreviewImageProps,
  ref: React.ForwardedRef<HTMLDivElement>
) {
  restProps satisfies Record<string, never>;

  const { thumbnailProps, imageProps } = usePreviewImageVisuals({ thumbnailWidth });

  return (
    <PreviewBase<HTMLImageElement>
      ref={ref}
      content={({ close }) => <img {...imageProps} src={src} alt={alt} onClick={() => close(true)} />}
      offset={-thumbnailWidth}
      placement='bottom left'
      closeDelay={0}
    >
      {triggerProps => <img {...triggerProps} {...thumbnailProps} src={thumbnailSrc} alt={alt} />}
    </PreviewBase>
  );
});