import { decode } from 'blurhash';
import React, { useRef, useEffect } from 'react';

interface IBlurhash extends Pick<
  React.CanvasHTMLAttributes<HTMLCanvasElement>,
  'className' | 'aria-label' | 'aria-hidden'
> {
  /** Hash to render */
  hash: string | null | undefined;
  /** Width of the blurred region in pixels. Defaults to 32. */
  width?: number;
  /** Height of the blurred region in pixels. Defaults to width. */
  height?: number;
  /**
   * Whether dummy mode is enabled. If enabled, nothing is rendered
   * and canvas left untouched.
   */
  dummy?: boolean;
}

/**
 * Renders a blurhash in a canvas element.
 * @see {@link https://blurha.sh/}
 */
const Blurhash: React.FC<IBlurhash> = React.memo(
  ({ hash, width = 32, height = width, dummy = false, ...canvasProps }) => {
    const canvasRef = useRef<HTMLCanvasElement>(null);

    useEffect(() => {
      const { current: canvas } = canvasRef;
      if (!canvas) return;

      // resets canvas
      canvas.width = canvas.width; // eslint-disable-line no-self-assign

      if (dummy || !hash) return;

      try {
        const pixels = decode(hash, width, height);
        const ctx = canvas.getContext('2d');
        const imageData = ctx?.createImageData(width, height);
        imageData?.data.set(pixels);

        if (imageData) {
          ctx?.putImageData(imageData, 0, 0);
        }
      } catch (err) {
        console.error('Blurhash decoding failure', { err, hash });
      }
    }, [dummy, hash, width, height]);

    return <canvas {...canvasProps} ref={canvasRef} width={width} height={height} />;
  },
);

export { Blurhash as default };
