import puppeteer from 'puppeteer';
import * as fs from 'fs';
import { join } from 'path';
import pixelmatch from 'pixelmatch';
import { PNG } from 'pngjs';

async function takeScreenshot(url = '/') {
  const browser = await puppeteer.connect({
    browserURL: 'http://127.0.0.1:9222',
  });
  const page = await browser.newPage();
  await page.setViewport({ width: 800, height: 600 })
  await page.goto(`http://localhost:4203${url}`, {
    timeout: 100_000
  });
  await new Promise(r => setTimeout(r, 1000))
  const image = await page.screenshot();
  // await browser.close();
  await page.close()
  return image;
}

export async function screenshotTest(url = '/', IMG_DIR: string) {
  const screenshot = await takeScreenshot(url);
  const screenshotPNG = PNG.sync.read(Buffer.from(screenshot.buffer));

  if (!fs.existsSync(IMG_DIR)) fs.mkdirSync(IMG_DIR);

  const OLD_IMG_PATH = join(IMG_DIR, 'sample.png');
  const DIFF_IMG_PATH = join(IMG_DIR, 'diff.png');
  const NEW_SCREENSHOT_PATH = join(IMG_DIR, 'new_screenshot.png');

  if (fs.existsSync(OLD_IMG_PATH)) {
    const oldImg = PNG.sync.read(fs.readFileSync(OLD_IMG_PATH));

    const { width, height } = screenshotPNG;
    const diff = new PNG({ width, height });
    const numDiffPixels = pixelmatch(
      screenshotPNG.data,
      oldImg.data,
      diff.data,
      width,
      height,
      { threshold: 0.05 }
    );

    if (numDiffPixels > 0) {
      fs.writeFileSync(DIFF_IMG_PATH, PNG.sync.write(diff));
      fs.writeFileSync(NEW_SCREENSHOT_PATH, screenshot);
    } else {
      if (fs.existsSync(DIFF_IMG_PATH)) fs.unlinkSync(DIFF_IMG_PATH);
      if (fs.existsSync(NEW_SCREENSHOT_PATH))
        fs.unlinkSync(NEW_SCREENSHOT_PATH);
      fs.writeFileSync(OLD_IMG_PATH, screenshot);
    }

    return numDiffPixels;
  } else fs.writeFileSync(OLD_IMG_PATH, screenshot);

  return 0;
}