import { PureComponent, createRef } from 'react';
import Box from '@mui/material/Box';
import { decodeBase62 } from 'skelehash-wasm';

// Module-level cache so re-renders / re-mounts don't re-run the WASM decoder
// for the same SkeleHash. Stores a Promise resolving to the decoded payload.
const decodeCache = new Map(); // base62 -> Promise<{ rgba, metadata } | null>

function decodeSkeleHash(base62) {
  if (!base62) return Promise.resolve(null);
  let cached = decodeCache.get(base62);
  if (!cached) {
    cached = decodeBase62(base62).catch(() => null);
    decodeCache.set(base62, cached);
  }
  return cached;
}

/**
 * Renders a SkeleHash (Base62) as an RGBA canvas placeholder.
 * Mirrors the synchronous-read / fine-grained styling approach of ThumbHashImage.
 */
export default class SkeleHashImage extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { ready: false };
    this.canvasRef = createRef();
    this.requestId = 0;
  }

  componentDidMount() {
    this.draw();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.hash !== this.props.hash) {
      this.draw();
    }
  }

  componentWillUnmount() {
    // Invalidate any in-flight decode so it doesn't touch the unmounted canvas.
    this.requestId += 1;
  }

  async draw() {
    const { hash } = this.props;
    const requestId = ++this.requestId;

    this.setState({ ready: false });
    const decoded = await decodeSkeleHash(hash);

    // Stale request (hash changed or component unmounted) — bail out.
    if (requestId !== this.requestId) return;
    const canvas = this.canvasRef.current;
    if (!canvas || !decoded?.rgba || !decoded?.metadata) return;

    const { rgba, metadata } = decoded;
    const width = metadata.outputWidth;
    const height = metadata.outputHeight;
    if (!width || !height) return;

    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    const clamped = new Uint8ClampedArray(rgba.buffer, rgba.byteOffset, rgba.byteLength);
    ctx.putImageData(new ImageData(clamped, width, height), 0, 0);

    this.setState({ ready: true });
  }

  render() {
    const { sx, hash } = this.props;
    const { ready } = this.state;

    return (
      <Box
        component="canvas"
        ref={this.canvasRef}
        aria-hidden
        data-skelehash={hash || undefined}
        sx={{
          display: 'block',
          width: '100%',
          height: '100%',
          objectFit: 'cover',
          opacity: ready ? 1 : 0,
          transition: 'opacity 200ms ease',
          ...sx,
        }}
      />
    );
  }
}