import { createLazyFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { useWindowEvent } from "@mantine/hooks";
import { Textarea } from "@mantine/core";

export const Route = createLazyFileRoute("/test")({
    component: TestPage,
});

function TestPage() {
    const [lines, setLines] = useState<string[]>([]);
    function deserializeKeyboardEvent(eventData:KeyboardEvent): object {
        return {
            key: eventData.key,
            code: eventData.code,
            location: eventData.location,
            ctrlKey: eventData.ctrlKey,
            shiftKey: eventData.shiftKey,
            altKey: eventData.altKey,
            metaKey: eventData.metaKey,
            repeat: eventData.repeat,
            isComposing: eventData.isComposing,
            charCode: eventData.charCode,
            keyCode: eventData.keyCode,
            which: eventData.which,
            bubbles: eventData.bubbles,
            cancelable: eventData.cancelable,
            composed: eventData.composed,
        };
    }
    useWindowEvent("keydown", event => {
        setLines(prev => [...prev, JSON.stringify(deserializeKeyboardEvent(event))]);
    });
    console.log(lines)
    return <Textarea autosize value={lines.join("\n")} />;
}
