@props([
    'name' => null,
    'label' => 'Upload file',
    'accept' => '*',
    'maxSize' => 5,
    'preview' => true,
    'currentFile' => null,
])

<div
    x-data="{
        dragActive: false,
        fileName: '',
        previewUrl: null,
        removedCurrent: false,
        maxBytes: {{ (int) $maxSize }} * 1024 * 1024,
        setFile(file) {
            if (!file) {
                return;
            }
            if (file.size > this.maxBytes) {
                this.$dispatch('toast', {
                    type: 'error',
                    message: 'File exceeds {{ (int) $maxSize }}MB limit.',
                });
                return;
            }
            this.fileName = file.name;
            if ({{ $preview ? 'true' : 'false' }} && file.type.startsWith('image/')) {
                this.previewUrl = URL.createObjectURL(file);
            } else {
                this.previewUrl = null;
            }
            const dt = new DataTransfer();
            dt.items.add(file);
            this.$refs.fileInput.files = dt.files;
        },
        handleInput(event) {
            this.setFile(event.target.files[0]);
        },
        handleDrop(event) {
            this.dragActive = false;
            this.setFile(event.dataTransfer.files[0]);
        },
        removeCurrent() {
            this.removedCurrent = true;
        }
    }"
    class="space-y-3"
>
    <label class="text-sm font-medium text-slate-700 dark:text-slate-200">{{ $label }}</label>

    <input type="hidden" name="{{ $name }}_remove" :value="removedCurrent ? 1 : 0">

    <div
        class="rounded-2xl border-2 border-dashed p-6 text-center transition"
        :class="dragActive ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20' : 'border-slate-300 bg-slate-50 dark:border-slate-600 dark:bg-slate-800/40'"
        x-on:dragover.prevent="dragActive = true"
        x-on:dragleave.prevent="dragActive = false"
        x-on:drop.prevent="handleDrop($event)"
    >
        <input
            x-ref="fileInput"
            type="file"
            name="{{ $name }}"
            accept="{{ $accept }}"
            class="hidden"
            x-on:change="handleInput($event)"
        >

        <button
            type="button"
            class="inline-flex items-center rounded-xl bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600"
            x-on:click="$refs.fileInput.click()"
        >
            Choose File
        </button>
        <p class="mt-3 text-sm text-slate-500 dark:text-slate-400">or drag and drop here</p>
        <p class="mt-1 text-xs text-slate-400">Max size: {{ $maxSize }}MB</p>
    </div>

    <template x-if="fileName">
        <div class="rounded-xl border border-slate-200 bg-white p-3 text-sm text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
            <p class="font-medium" x-text="fileName"></p>
        </div>
    </template>

    <template x-if="previewUrl">
        <div class="overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700">
            <img :src="previewUrl" alt="Preview" class="h-40 w-full object-cover">
        </div>
    </template>

    @if($currentFile)
        <div x-show="!removedCurrent" class="flex items-center justify-between rounded-xl border border-slate-200 bg-white p-3 text-sm dark:border-slate-700 dark:bg-slate-800">
            <a href="{{ $currentFile }}" target="_blank" class="truncate text-primary-600 hover:underline dark:text-primary-400">
                Current file
            </a>
            <button type="button" class="text-rose-600 hover:text-rose-700" x-on:click="removeCurrent">Remove</button>
        </div>
    @endif
</div>