@props([
    'restrictions_description' => ''
])

@php
    $id = $attributes->merge(['id' => 'dropzone-file'])->get('id');
    $name = $id;
@endphp

<div>
@if(!empty($label))
    <span class="text-sm font-semibold text-gray-900 mt-4">
        {{ $label }}
    </span>
@endif
<div class="mt-2 flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600" ondrop="dropHandler(event)" ondragover="dragOverHandler(event)" ondragleave="dragLeaveHandler(event)" ondragenter="dragEnterHandler(event)">
    <label class="flex items-center justify-center w-full h-full" for="{{$id}}">
        <div class="pointer-events-none flex flex-col items-center justify-center p-5">
            <svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
            </svg>
            <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
            @if(!empty($restrictions_description))
                <p class="text-xs text-gray-500 dark:text-gray-400">{{$restrictions_description}}</p>
            @endif
            <button type="button" class="pointer-events-none text-white bg-titus-primary font-medium rounded-lg text-sm px-5 py-2.5 mt-6 text-center items-center flex gap-2">
                @svg('img/icons/search', 'text-white w-[18px] h-[18px]')
                <span>Browse File</span>
            </button>
        </div>
        <div class="hidden flex flex-col items-center justify-center pt-5 pb-6">
            <p class="text-gray-500 dark:text-gray-400 font-bold"></p>
        </div>
        <input
            type="file"
            onchange="changeFileHandler(event)"
            {{ $attributes->merge(['class' => 'hidden'])->filter(fn($val, $key) => $key != 'id') }}
                name="{{$name}}"
            id="{{$id}}"
        />
    </label>

    <div class="uploaded-file-wrapper hidden flex flex-col h-full w-full justify-center p-8">
        <div class="flex flex-col flex-1 gap-2 justify-center">
            <h3 class="text-sm text-center font-semibold text-gray-900">Selected file to upload</h3>
            <span class="uploaded-file-wrapper__file-name text-sm font-semibold text-primary-800 flex gap-2 items-center justify-center">
                @svg('img/icons/document', 'h-[18px] w-[14px] min-w-[14px] stroke-[4px]')
                <span class="break-all"></span>
            </span>
            <span class="uploaded-file-wrapper__file-size text-center text-xs font-semibold text-gray-400"></span>
        </div>
        <div class="flex justify-center">
            <button type="button" onclick="changeFileButtonClickHandler('{{$id}}')" class="text-primary-600 flex items-center gap-2">
                @svg('img/icons/refresh')
                <span class="font-medium hover:underline">Change file</span>
            </button>
        </div>
    </div>
</div>

@if(!empty($helptext))
    <div class="mt-2">
        <span class="leading-tight text-sm font-normal text-gray-500">
            {{ $helptext }}
        </span>
    </div>
@endif
</div>

@once
    <script>

        function changeFileButtonClickHandler(id) {
            document.getElementById(id).click();
        }

        function changeFileHandler(e) {
            e.target.previousElementSibling.classList.remove('hidden');
            const dropZoneWrapper = e.target.closest('label').parentElement;
            const uploadedFileWrapper = dropZoneWrapper.querySelector('.uploaded-file-wrapper');
            uploadedFileWrapper.classList.remove('hidden')

            function humanFileSize(size) {
                let i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
                return (~~(size / Math.pow(1024, i))) + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
            }

            uploadedFileWrapper.querySelector('.uploaded-file-wrapper__file-name span').textContent = e.target.files[0].name;
            uploadedFileWrapper.querySelector('.uploaded-file-wrapper__file-size').textContent = humanFileSize(e.target.files[0].size);
            e.target.closest('label').classList.add('hidden')
        }

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

            // Prevent default behavior (Prevent file from being opened)
            ev.preventDefault();

            let file = null;

            if (ev.dataTransfer.items) {
                // Use DataTransferItemList interface to access the file(s)
                const item = [...ev.dataTransfer.items][0];
                if (item.kind === "file") {
                    file = item.getAsFile();
                }
            } else {
                // Use DataTransfer interface to access the file(s)
                file = ev.dataTransfer.files[0];
            }

            if(file !== null) {
                const dT = new DataTransfer();
                dT.items.add(file);
                document.querySelector('#{{$id}}').files = dT.files;
            }

            dragLeaveHandler(ev)
            changeFileHandler({target: ev.target.querySelector('input')})
        }

        function dragOverHandler(ev) {
            console.log("File(s) in drop zone");

            // Prevent default behavior (Prevent file from being opened)
            ev.preventDefault();
        }

        function dragEnterHandler(ev) {
            const label = ev.currentTarget.querySelector('label');
            label.firstElementChild.classList.add('opacity-50');
            //label.querySelector('div').classList.remove('invisible');
            label.classList.remove('hover:bg-gray-100');
            label.classList.add('border-blue-300', 'bg-blue-300/[.35]');
        }

        function dragLeaveHandler(ev) {
            const label = ev.currentTarget.querySelector('label');
            label.firstElementChild.classList.remove('opacity-50');
            label.classList.add('hover:bg-gray-100');
            label.classList.remove('border-blue-300', 'bg-blue-300/[.35]');
        }
    </script>
@endonce