import pixelmatch from '@sitepager/pixel-match';

const diff = pixelmatch(
  img1: Uint8Array | Uint8ClampedArray,
  img2: Uint8Array | Uint8ClampedArray,
  output: Uint8Array | Uint8ClampedArray | null,
  width: number,
  height: number,
  options?: PixelmatchOptions
): number

import pixelmatch from '@sitepager/pixel-match/browser';

// Example with canvas elements
const canvas1 = document.getElementById('canvas1') as HTMLCanvasElement;
const canvas2 = document.getElementById('canvas2') as HTMLCanvasElement;
const outputCanvas = document.getElementById('output') as HTMLCanvasElement;

const ctx1 = canvas1.getContext('2d')!;
const ctx2 = canvas2.getContext('2d')!;
const outputCtx = outputCanvas.getContext('2d')!;

const img1 = ctx1.getImageData(0, 0, width, height);
const img2 = ctx2.getImageData(0, 0, width, height);
const output = outputCtx.createImageData(width, height);

const diff = pixelmatch(img1.data, img2.data, output.data, width, height, {
    threshold: 0.1,
});

outputCtx.putImageData(output, 0, 0);

import pixelmatch from '@sitepager/pixel-match/node';
import { readFileSync } from 'fs';
import { PNG } from 'pngjs';

// Read images
const img1 = PNG.sync.read(readFileSync('before.png'));
const img2 = PNG.sync.read(readFileSync('after.png'));
const { width, height } = img1;
const output = new PNG({ width, height });

// Compare images
const diff = await pixelmatch(
    img1.data,
    img2.data,
    output.data,
    width,
    height,
    { threshold: 0.1 },
);

// Save diff image
output.pack().pipe(createWriteStream('diff.png'));

interface PixelmatchOptions {
    threshold?: number; // Color difference threshold (0 to 1). Default: 0.1
    includeAA?: boolean; // Whether to detect and ignore anti-aliasing. Default: false
    alpha?: number; // Opacity of unchanged pixels in the diff output. Default: 0.1
    aaColor?: [number, number, number]; // Color of anti-aliased pixels in the diff output [r, g, b]. Default: [255, 255, 0] (yellow)
    diffColor?: [number, number, number]; // Color of different pixels in the diff output [r, g, b]. Default: [255, 0, 0] (red)
    diffColorAlt?: [number, number, number]; // Alternative color for different pixels when img2 is darker [r, g, b]
    diffMask?: boolean; // Whether to draw the diff over a transparent background (true) or over the original image (false)
    horizontalShiftPixels?: number; // Number of pixels to check horizontally for similar pixels. Default: 0
    verticalShiftPixels?: number; // Number of pixels to check vertically for similar pixels. Default: 0
}

const defaultOptions = {
    threshold: 0.1, // 10% color difference threshold
    includeAA: false, // Don't detect anti-aliasing
    alpha: 0.1, // 10% opacity for unchanged pixels
    aaColor: [255, 255, 0], // Yellow for anti-aliased pixels
    diffColor: [255, 0, 0], // Red for different pixels
    diffColorAlt: undefined, // No alternative color
    diffMask: false, // Draw diff over original image
    horizontalShiftPixels: 0, // No horizontal shift
    verticalShiftPixels: 0, // No vertical shift
};

import { pixelmatch } from '@sitepager/pixel-match/browser';

const diff = pixelmatch(img1, img2, output, width, height);

const options = {
    threshold: 0.05, // More strict comparison
    includeAA: true, // Include anti-aliasing in comparison
    alpha: 0.5, // More visible unchanged pixels
    diffColor: [255, 0, 255], // Purple diff color
    diffMask: true, // Transparent background
};

const diff = pixelmatch(img1, img2, output, width, height, options);

const options = {
    horizontalShiftPixels: 7, // Allow 7px horizontal shift
    verticalShiftPixels: 6, // Allow 6px vertical shift
    threshold: 0.1,
};

const diff = pixelmatch(img1, img2, output, width, height, options);

const options = {
    aaColor: [0, 255, 255], // Cyan for anti-aliased pixels
};

const diff = pixelmatch(img1, img2, output, width, height, options);

const options = {
    diffColor: [255, 0, 0], // Red for differences (default)
    diffColorAlt: [0, 0, 255], // Blue when img2 is darker
};

const diff = pixelmatch(img1, img2, output, width, height, options);

const options = {
    threshold: 0.07, // Color difference threshold
    includeAA: true, // Detect and ignore anti-aliasing
    alpha: 0.3, // Opacity of unchanged pixels in diff
    aaColor: [0, 255, 255], // Cyan for anti-aliased pixels
    diffColor: [255, 0, 0], // Red for differences
    diffColorAlt: [0, 0, 255], // Blue for darker pixels in img2
    diffMask: true, // Output only the diff mask
    horizontalShiftPixels: 2, // Allow 2px horizontal shift
    verticalShiftPixels: 2, // Allow 2px vertical shift
};

const diff = pixelmatch(img1, img2, output, width, height, options);