{% extends "base" %}

{% block styles %}

html, body {
overflow-y:hidden;
}

body {
height: 100vh;
font-family: monospace;
padding: 3rem;

display: flex;
}

form { flex: 1; }

textarea {
height: 90%;
width: 100%;

background: none;
border: none;

padding-left: 10px

resize: none;
overflow: auto;

color: inherit;
font-family: 'Fira Code', monospace;
line-height: inherit;
}

button[type="submit"] {
position: absolute;
bottom: 1rem;
right: 1rem;

height: 4rem;
width: 4rem;
border: none;
border-radius: 50%;
background: #F29718;

font-size: 0rem;

cursor: pointer;
}

textarea:focus, input:focus {
outline: none;
}

*:focus {
outline: none;
}

button[type="submit"].hidden { display: none; }

#drop_zone {
border: 1px dashed grey;
width: 100%;
height: 100%;
}
{% endblock styles %}

{% block body %}
<form action="/submit" method="post">
    <textarea style="resize: none" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" placeholder="

                                    ========

WEB USAGE
---------

    Drag a file and drop it here.

    or

    After typing, press the big yellow button to paste. 

    or 

    Just press Ctrl + Enter once done.


CLI USAGE
---------

    curl -Ls -o /dev/null -w %{url_effective} --data-binary @file.txt https://bin.wantguns.dev

    Better use-cases of CLI mentioned at Github.

                                    ========

open-sourced at:    github.com/wantguns/bin" autofocus autocomplete="off" autocorrect="off" autocapitalize="off"
        spellcheck="false"></textarea>

    <button type="submit" title="Paste">&#x2398</button>
</form>

<script>
    const form = document.querySelector('form');
    const input = document.querySelector('textarea');
    const button = document.querySelector('button[type="submit"]');

    async function postData(url = '', data) {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: data
        });
        return response;
    }

    const onInput = () => button.classList.toggle('hidden', !input.value);
    input.addEventListener('input', onInput);
    onInput();

    document.body.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && e.ctrlKey) {
            form.submit();
        }
    });

    function dropHandler(ev) {
        console.log('File(s) dropped');

        ev.preventDefault();

        if (ev.dataTransfer.items) {
            for (var i = 0; i < ev.dataTransfer.items.length; i++) {
                if (ev.dataTransfer.items[i].kind === 'file') {
                    var file = ev.dataTransfer.items[i].getAsFile();
                    console.log('... file[' + i + '].name = ' + file.name);

                    var url = window.location.href;

                    postData(url, file)
                        .then(data => {
                            window.location.href = data.url;
                        })
                        .catch(function (err) {
                            console.info(err + " url: " + url);
                        });
                }
            }
        } else {
            for (var i = 0; i < ev.dataTransfer.files.length; i++) {
                console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
            }
        }
    }
</script>
{% endblock body %}