<html>

<head>
    <title>yeet</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        :root {
            font-family: sans-serif;
            box-sizing: border-box;
        }

        #input,
        #output {
            padding: 0;
            margin: 0;
            width: 49.5%;
            height: 80%;
            outline: 0px none transparent;
            resize: none;
        }

        .control {
            display: flex;
            justify-content: space-around;
            align-items: center;
            justify-items: center;
            height: 10%;
        }

        .control > button {
            font-size: 20pt;
            width: 20%;
            display: block;
        }
    </style>
</head>

<body>
    <h1>Pascal / Delphi Source Code Yeeter</h1>
    <p class="description">Because Pascal is awesome. Time to make it even more awesomer.</p>

    <div class="app">
        <textarea id="input" placeholder="Copy Pascal/Delphi source here" oninput="yeetTextarea()"></textarea>
        <textarea id="output" placeholder="output..." disabled></textarea>
        <div class="control">
            <button onclick="copyText()">Copy Output</button>
        </div>
    </div>

    <script>
        function copyText() {
            const output = document.querySelector('#output')
            output.disabled = false
            output.select()
            output.setSelectionRange(0, 999999)
            document.execCommand("copy")
            output.disabled = true
        }

        function yeet(input) {
            const defines = {}
            let counter = 2
            const tokenRegex = /\'[^\']*\'|\{[^\}]*\}|\*\*|:=|<=|>=|\+=|-=|\*=|\/=|\(\*|\*\)|\(\.|\.\)|\/\/|<>|><|>>|<<|[\(\)\[\]\.\,\;\+\-\*\/\^@$#&%=:<>]|\w+/g
            const tokens = input.replace(
                tokenRegex,
                token => defines[token] || (defines[token] = 'y' + Array(counter++).fill('e').join('') + 't ')
            )

            counter = 0
            const definesStr = Object.entries(defines)
                .map(([token, yeeti]) => `{$define ${yeeti}:=${token}}`)
                .sort()
                .reverse()
                .join('\n')
                .replace(/\x01/g, () => strings[counter++])

            return '{$MACRO ON}\n' + definesStr + '\n\n' + tokens
        }

        function yeetTextarea() {
            document.querySelector('#output').value = yeet(document.querySelector('#input').value)
        }

        (() => {
            document.querySelector('#input').value = `{$MODE ObjFPC}\nuses sysutils, strutils;\n\nfunction dosth() : string;\nbegin\n    result := 'hello world';\nend;\n\nvar txt: string;\nbegin\n    txt := dosth();\n    write(txt);\nend.`
            yeetTextarea()
        })()
    </script>
</body>

</html>