#!/usr/bin/env node
const puppeteer = require('puppeteer');
const QUICK_URL = 'https://emexdwc.ae/QuickDetails.aspx?c=SUBARU201802&gid=11884&vid=0&ssd=$*KwGdqbit1suR0ubYx-jFj8XR8fbomJ-emYinlNza6f7m4Nf0houS7-TvmejqkOewy9Ponp-Rlp6c1YC4n43Hi5KN5O-asbzd4-ian-ien5LPyNGNgovNjZSYmsXOyI3Xi5KN6IvWAAAAAHBDYDE=$';

(async () => {
    const browser = await puppeteer.launch({ headless: 'new', args: ['--no-sandbox'] });
    const page = await browser.newPage();
    await page.setViewport({ width: 1400, height: 900 });
    await page.goto(QUICK_URL, { waitUntil: 'networkidle2', timeout: 30000 });
    await new Promise(r => setTimeout(r, 2000));
    const unitUrl = await page.evaluate(() => document.querySelector('a[href*="Unit.aspx"]')?.href);
    await page.goto(unitUrl, { waitUntil: 'networkidle2', timeout: 30000 });
    await new Promise(r => setTimeout(r, 3000));

    const info = await page.evaluate(() => {
        const img = document.querySelector('img.dragger[src*="laximo"]');
        if (!img) return { error: 'no img' };
        const imgRect = img.getBoundingClientRect();
        const scaleX = img.naturalWidth / imgRect.width;
        const scaleY = img.naturalHeight / imgRect.height;

        const hotspots = [];
        for (const div of document.querySelectorAll('div.dragger.g_highlight[name]')) {
            const r = div.getBoundingClientRect();
            hotspots.push({
                name: div.getAttribute('name'),
                // Raw rendered positions relative to image
                relLeft: Math.round((r.left - imgRect.left) * 100) / 100,
                relTop: Math.round((r.top - imgRect.top) * 100) / 100,
                relW: Math.round(r.width * 100) / 100,
                relH: Math.round(r.height * 100) / 100,
                // Scaled to natural coords
                natLeft: Math.round((r.left - imgRect.left) * scaleX),
                natTop: Math.round((r.top - imgRect.top) * scaleY),
                natW: Math.round(r.width * scaleX),
                natH: Math.round(r.height * scaleY),
            });
        }
        return {
            imgNatural: { w: img.naturalWidth, h: img.naturalHeight },
            imgRendered: { w: imgRect.width, h: imgRect.height, left: imgRect.left, top: imgRect.top },
            scale: { x: Math.round(scaleX * 100) / 100, y: Math.round(scaleY * 100) / 100 },
            hotspots,
        };
    });
    console.log(JSON.stringify(info, null, 2));
    await browser.close();
})();