<!DOCTYPE html>
<html>
<head>
<script src="../../../../resources/ui-helper.js"></script>
<script src="../../resources/compute-subsets.js"></script>
<script>
if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

// FIXME: Add support for testing force touch.
const TouchType = {
    "SingleTap": "SingleTap",
    "StylusSingleTap": "StylusSingleTap",
};
const TouchTypeDisplayName = {
    "SingleTap": "Single Tap",
    "StylusSingleTap": "Stylus Single Tap",
};

class TouchTest {
    constructor(elementToTouch, touchType, modifiers = [])
    {
        this.elementToTouch = elementToTouch;
        this.touchType = touchType;
        this.modifiers = modifiers;
    }

    toString()
    {
        return `{ ${this.touchType}, ${this.elementToTouch}, [${this.modifiers}] }`;
    }

    run()
    {
        let centerX = this.elementToTouch.offsetLeft + this.elementToTouch.offsetWidth / 2;
        let centerY = this.elementToTouch.offsetTop + this.elementToTouch.offsetHeight / 2;
        if (this.touchType === TouchType.SingleTap)
            return UIHelper.tapAt(centerX, centerY, this.modifiers);
        return UIHelper.stylusTapAt(centerX, centerY, this.modifiers);
    }
}

const modifierKeys = ["metaKey", "altKey", "ctrlKey", "shiftKey"];

let currentTest;
let tests = [];

function handleTouchDown(event)
{
    logTouchEvent(event);
}

function handleTouchUp(event)
{
    logTouchEvent(event);
    nextTouchPress();
}

function log(message)
{
    document.getElementById("console").appendChild(document.createTextNode(message + "\n"));
}

function logTouchEvent(event)
{
    let pieces = [];
    for (let propertyName of ["type", "pageX", "pageX", "scale", "rotation", "altKey", "ctrlKey", "metaKey", "shiftKey"])
        pieces.push(`${propertyName}: ${event[propertyName]}`);
    log(pieces.join(", "));
}

const modifierDisplayNameMap = {
    "altKey": "Option",
    "ctrlKey": "Control",
    "metaKey": "Command",
    "shiftKey": "Shift",
    "capsLockKey": "Caps Lock",
}

function displayNameForTest(test)
{
    let displayNamesOfModifiers = [];
    for (const modifier of test.modifiers)
        displayNamesOfModifiers.push(modifierDisplayNameMap[modifier]);
    let result = "";
    if (displayNamesOfModifiers.length)
        result += displayNamesOfModifiers.join(" + ") + " + ";
    result += TouchTypeDisplayName[test.touchType];
    return result;
}

async function nextTouchPress()
{
    if (!tests.length) {
        document.body.removeChild(document.getElementById("square"));
        if (window.testRunner)
            testRunner.notifyDone();
        return;
    }
    currentTest = tests.shift();
    log(`\nTest ${displayNameForTest(currentTest)}:`);
    if (window.testRunner)
        await currentTest.run();
}

function runTest()
{
    if (!window.testRunner)
        return;
    nextTouchPress();
}

function setUp()
{
    let square = document.getElementById("square");
    square.addEventListener("touchstart", handleTouchDown, true);
    square.addEventListener("touchend", handleTouchUp, true);

    for (const touchType in TouchType) {
        for (const modifiers of computeSubsets(modifierKeys))
            tests.push(new TouchTest(square, touchType, modifiers));
    }

    runTest();
}

window.addEventListener("load", setUp, true);
</script>
<style>
#square {
    background-color: blue;
    color: white;
    height: 128px;
    width: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
}
</style>
</head>
<body>
<p>This logs DOM touchdown and touchup events that are dispatched when single tapping an element while holding modifier keys with and without a stylus. Must be run in WebKitTestRunner.</p>
<div id="square">Touch Me</div>
<pre id="console"></pre>
</body>
</html>