class Session {
    private wss: WebSocketStream
    private queue: string[] = []
    private writer?: WritableStreamDefaultWriter

    constructor() {
        this.wss = new WebSocketStream("ws://127.0.0.1:8001/")
    }

    async connect() {
        const openInfo = await this.wss.opened
        this.writer = openInfo.writable.getWriter()
        for (const event of this.queue) {
            void this.writer.write(event)
        }
    }

    reportEvent(event: string) {
        if (this.writer === undefined) {
            this.queue.push(event)
        } else {
            void this.writer.write(event)
        }
    }
}

function startSession(data: string): Session {
    const session = new Session()
    void session.connect()
    session.reportEvent(data)
    return session
}

document.addEventListener("DOMContentLoaded", () => {
    const ua = navigator.userAgentData?.brands?.map((brand) => `${brand.brand}:${brand.version}`).join(',')
    const session = startSession(
        `${document.documentElement.clientWidth}x${document.documentElement.clientHeight}:${ua}`
    )
    document.documentElement.addEventListener(
        "click",
        (e: MouseEvent) => {
            const target =
                e.target instanceof HTMLElement ? e.target.tagName : ""
            const x = e.pageX / document.documentElement.clientWidth
            const y = e.pageY / document.documentElement.clientHeight
            session.reportEvent(`${x}x${y}:${target}`)
        },
        {
            capture: true,
        }
    )
})