<div id="account_map_import" class="bg-dark-800 p-4 w-96" style="display: none;">
    <div class="flex justify-between mb-2">
        <h3 class="mb-0">{{ _("Import Wallet") }}</h3>
        <p class="m-0 cursor-pointer" onclick="hidePageOverlay()" class="cursor-pointer">Close</p>
    </div>

    <p>Import an existing wallet into Specter by either pasting its data, scanning its QR code or uploading its data file.</p>

    <form action="./import_wallet/" method="POST">
        <input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>

        <textarea class="mt-3" id="txt" name="wallet_data" placeholder="Enter your wallet data here"></textarea>

        <div class="popup hidden rounded-md overflow-hidden" id="popup">
          <video muted playsinline id="qr-video"></video>
        </div>

        <div>
            <a class="button w-full mt-3" href="#" id="scanme">
                <img src="{{ url_for('static', filename='img/qr-code.svg') }}">
                {{ _("Scan") }}
            </a>

            <input class="hidden" type="file" id="file" multiple/>
            <label class="button w-full" for="file">
                <img src="{{ url_for('static', filename='img/file.svg') }}">
                {{ _("Choose files") }}
            </label>
        </div>

        <button class="w-full mt-2 mb-0 mr-0 button bg-accent text-white" type="submit" name="action" value="importwallet">{{ _("Continue") }}</button>
    </form>
</div>


<script type="module">
	import QrScanner from "{{ url_for('static', filename='qr/qr-scanner.min.js') }}";
    document.addEventListener("DOMContentLoaded", function(){
        QrScanner.WORKER_PATH = "{{ url_for('static', filename='qr/qr-scanner-worker.min.js') }}";

        const video = document.getElementById('qr-video');

        const scanner = new QrScanner(video, result => {
            scanner.stop();
            document.getElementById("popup").style.display = 'none';
            let deviceType = document.getElementById("device_type");
            document.getElementById("txt").value = result;
        });

        // This is needed to access the scanner object from outside of the module
        window.scanner = scanner

        document.getElementById("scanme").addEventListener("click", function(){
            try{
                scanner.start();
                document.getElementById("popup").style.display = 'flex';
            }catch(e){
                showError(`{{ _("Can't start the QR scanner!") }}\n\n` + e);
            }
        });

        document.getElementById("popup").addEventListener("click", function(){
            document.getElementById("popup").style.display = 'none';
            scanner.stop();
        });
    });
</script>

<script type="text/javascript">
	document.addEventListener("DOMContentLoaded", function(){
		var el = document.getElementById("file");
		var txt = document.getElementById("txt");

		if (el != null) {
			el.addEventListener("change", (e) => {
				files = e.currentTarget.files;
				console.log(files);
				for(let i=0; i<files.length; i++){
					console.log(files[i].name);
					let reader = new FileReader();
					reader.onload = function(e) {
            document.getElementById("txt").value = reader.result;						
					}
					reader.readAsText(files[i]);
				}
			});
		}
	});

	function onCancelOverlay() {
        if (window.scanner) {
            document.getElementById("popup").style.display = 'none';
            window.scanner.stop();
        }
	}

    // Deletes the global scanner property again if there is a reload
    window.addEventListener('unload', () => {
        if (window.scanner) {
            delete window.scanner
        }
    })
</script>
