{% extends 'django_spire/glue/form/widget/widget.html' %}

{% block widget_content %}
    <div
        class="position-relative"
        x-data="{
            show_dropdown: false,
            files: [],
            objects: {},
            is_multiple: true,
            max_files: {{ max_files|default:'null' }},

            accept: '{{ accept|default:'' }}',
            maximum_filesize: {{ maximum_filesize|default:'10' }} * 1024 * 1024,
            units: ['B', 'KB', 'MB', 'GB'],

            init() {
                if (!this.value) return;
                try {
                    this.files = Array.isArray(this.value) ? this.value : JSON.parse(this.value);
                } catch(e) {
                    this.files = [];
                }
            },

            format_file_size(bytes) {
                if (!bytes) return '';
                let size = bytes;
                let index = 0;
                while (size >= 1024 && index < this.units.length - 1) {
                    size /= 1024;
                    index++;
                }
                return size.toFixed(1) + ' ' + this.units[index];
            },

            truncate_name(name, max = 30) {
                return name && name.length > max ? name.slice(0, max - 3) + '...' : name;
            },

            handle_files_change(event) {
                const new_files = Array.from(event.target.files || []);
                if (this.max_files && (this.files.length + new_files.length) > this.max_files) {
                    return;
                }
                for (let file of new_files) {
                    if (file.size > this.maximum_filesize) continue;
                    let file_id = Date.now() + '_' + Math.random().toString(36).substr(2, 9);
                    let file_obj = { id: file_id, name: file.name, size: file.size, file: file };
                    if (file.type.startsWith('image/')) {
                        let reader = new FileReader();
                        reader.onload = (e) => { file_obj.preview = e.target.result; this.$forceUpdate(); };
                        reader.readAsDataURL(file);
                    }
                    this.files.push(file_obj);
                    this.objects[file_id] = file;
                }
                this.update_value();
                event.target.value = '';
            },

            remove_file(file_id) {
                this.files = this.files.filter(f => f.id !== file_id);
                delete this.objects[file_id];
                this.update_value();
            },

            update_value() {
                this.value = this.files.map(f => f.file).filter(f => f);
            }
        }"
    >
        <button
            class="form-control text-start d-flex justify-content-between"
            type="button"
            @click="show_dropdown = !show_dropdown"
        >
            <span class="d-flex flex-wrap align-items-center">
                <template x-if="files.length === 0">
                    <span class="text-muted">No files selected</span>
                </template>
                <template x-for="(file, index) in files" :key="file.id">
                    <span class="badge bg-secondary me-1" x-text="truncate_name(file.name)"></span>
                </template>
            </span>
            <span class="d-flex align-items-center">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </span>
        </button>

        <input
            type="file"
            x-ref="file_input"
            class="d-none"
            @change="handle_files_change"
            :accept="accept"
        >

        <div
            x-cloak
            x-show="show_dropdown"
            @click.outside="show_dropdown = false"
            class="shadow border rounded-2 mt-2 w-100 p-0 list-group"
            style="max-height: 250px; overflow-y: auto;"
        >
            <template x-for="file in files" :key="file.id">
                <div class="py-2 d-flex align-items-center px-3">
                    <div class="me-2" style="width: 32px; height: 32px;">
                        <template x-if="file.preview">
                            <img :src="file.preview" class="img-fluid rounded" style="max-width: 32px; max-height: 32px; object-fit: cover;">
                        </template>
                        <template x-if="!file.preview">
                            <div class="d-flex align-items-center justify-content-center rounded bg-light" style="width: 32px; height: 32px;">
                                <i class="bi bi-file-earmark small"></i>
                            </div>
                        </template>
                    </div>
                    <div class="flex-grow-1">
                        <div class="text-truncate small" x-text="truncate_name(file.name)"></div>
                    </div>
                    <div class="d-flex align-items-center">
                        <i class="bi bi-trash text-danger cursor-pointer" @click="remove_file(file.id)"></i>
                    </div>
                </div>
            </template>

            <div
                class="m-2 border border-dashed rounded p-2 text-center cursor-pointer small"
                @click="$refs.file_input.click()"
            >
                <span class="text-muted">Click to add files</span>
            </div>
        </div>
    </div>
{% endblock %}