{% extends "base.html" %}

{% block content %}
<div class="flex flex-col h-screen">
    <header class="flex items-center justify-between bg-white px-4 py-4 sm:px-6 lg:px-8">
        <form action="/" method="get" class="flex items-center space-x-4">
            <button tabindex="-1" type="submit" class="border-none focus:outline-none">
                <h1 class="flex items-center text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                    <span class="text-6xl font-extrabold text-red-500"> Tag </span>
                    <span class="ml-2 text-5xl"> anrog </span>
                </h1>
            </button>
        </form>
        <div class="mx-auto w-full max-w-xl"></div>
        <a class="border-none focus:outline-none mx-1.5" href="/tags">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#EF4444" class="h-6 w-6">
                <g id="SVGRepo_bgCarrier" stroke-width="0"/>
                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
                <g id="SVGRepo_iconCarrier"> <path d="M20 11L3 11" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/> <path d="M11 16H3" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/> <path d="M14 18L17.5 15L21 18" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 6L13.5 6M20 6L17.75 6" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/> </g>
            </svg>
        </a>
        <a class="border-none focus:outline-none mx-1.5" href="/upload">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#EF4444" class="h-6 w-6">
                <path stroke-linecap="round" color="#EF4444" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
            </svg>
        </a>
    </header>
    <main class="h-screen flex flex-col items-center justify-center bg-white px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl w-full mt-6 grid grid-cols-1 gap-4 bg-gray-50">
            <form id="upload-form" enctype="multipart/form-data" method="post" class="rounded-md shadow-sm p-4">
                <h2 class="text-2xl font-bold mt-2">
                    Upload your file
                </h2>
                <div class="mt-4">
                    <label class="sr-only" for="file">Upload</label>
                    <input class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                           id="file" required="" type="file" autocomplete="off" name="file" accept=".jpg,.jpeg.,.gif,.png,.mov,.mp4" multiple>
                </div>
                <div class="container mt-4 mx-auto px-4">
                    <div id="preview-container" class="grid grid-cols-7 gap-4"></div>
                </div>
                <button id="submit-button" type="submit" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors !bg-black !text-white !hover:bg-gray-700 !disabled:bg-gray-400 h-10 px-4 py-2 mt-4">
                    Submit
                </button>
            </form>
        </div>
    </main>
    <footer class="w-full h-20 flex items-center justify-center bg-white">
        <div class="text-center">
            <a class="text-gray-600" href="/media/random">Charting digital depths, from Alferaki to Faina</a>
        </div>
    </footer>
    <script>
        document.getElementById('file').addEventListener('change', function(event) {
            // clear previous preview children
            let previewContainer = document.getElementById('preview-container');
            while (previewContainer.firstChild) {
                previewContainer.removeChild(previewContainer.firstChild);
            }

            for (let i = 0; i < event.target.files.length; i++) {
                let file = event.target.files[i];
                let slug = file.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
                let fileReader = new FileReader();
                if (file.type.match('image')) {
                    fileReader.onload = function() {
                        // convert to png
                        let img = new Image();
                        img.src = fileReader.result;
                        img.onload = function() {
                            let canvas = document.createElement('canvas');
                            canvas.width = img.width;
                            canvas.height = img.height;
                            let ctx = canvas.getContext('2d');
                            ctx.drawImage(img, 0, 0);
                            let dataUrl = canvas.toDataURL('image/png');
                            let img2 = document.createElement('img');
                            img2.id = slug;
                            img2.src = dataUrl;
                            img2.classList.add('w-32', 'h-32', 'object-cover', 'rounded-md', 'file-preview');
                            document.getElementById('preview-container').appendChild(img2);
                            console.log('preview added ' + i);
                        };
                    };
                    fileReader.readAsDataURL(file);
                } else {
                    fileReader.onload = function() {
                        let blob = new Blob([fileReader.result], {type: file.type});
                        let url = URL.createObjectURL(blob);
                        let video = document.createElement('video');
                        let timeupdate = function() {
                            if (snapImage()) {
                                video.removeEventListener('timeupdate', timeupdate);
                                video.pause();
                            }
                        };
                        video.addEventListener('loadeddata', function() {
                            if (snapImage()) {
                                video.removeEventListener('timeupdate', timeupdate);
                            }
                        });
                        let snapImage = function() {
                            let canvas = document.createElement('canvas');
                            canvas.width = video.videoWidth;
                            canvas.height = video.videoHeight;
                            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                            let image = canvas.toDataURL();
                            let success = image.length > 100000;
                            if (success) {
                                let img = document.createElement('img');
                                img.id = slug;
                                img.src = image;
                                img.classList.add('w-32', 'h-32', 'object-cover', 'rounded-md', 'file-preview');
                                document.getElementById('preview-container').appendChild(img);
                                URL.revokeObjectURL(url);
                                console.log('preview added ' + i);
                            }
                            return success;
                        };
                        video.addEventListener('timeupdate', timeupdate);
                        video.preload = 'metadata';
                        video.src = url;
                        // Load video in Safari / IE11
                        video.muted = true;
                        video.playsInline = true;
                        video.play();
                    };
                    fileReader.readAsArrayBuffer(file);
                }
            }
        });
        document.getElementById('upload-form').addEventListener('submit', async function(event) {
            event.preventDefault(); // Prevent the default form submission
            document.getElementById('submit-button').disabled = true;

            const formData = new FormData();
            const fileInput = document.getElementById('file');

            for (let i = 0; i < fileInput.files.length; i++) {
                let slug = fileInput.files[i].name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
                let imgElement = document.getElementById(slug);
                if (imgElement === null) {
                    continue;
                }
                let blob = dataURLtoBlob(imgElement.src);
                formData.append('file', fileInput.files[i]);
                formData.append('preview', blob, 'preview.png');
            }

            await fetch('/upload/files', {
                method: 'POST',
                body: formData
            }).then(response => {
                if (response.ok) {
                    document.getElementById('submit-button').disabled = false;
                    window.location.href = '/search?q=null';
                } else {
                    console.error('Error:', response);
                    alert('Error uploading file');
                }
            }).catch(error => {
                console.error('Error:', error);
                alert('Error uploading file');
            });
        });

        function dataURLtoBlob(dataurl) {
            let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {type:mime});
        }
    </script>
</div>
{% endblock %}