#include utility.js
#include ui/menus.js

Umi.UI.Uploads = (function() {
    return {
        create: function(fileName) {
            const uploadHistory = Umi.UI.Menus.Get('uploads');
            if(!uploadHistory) {
                console.error('Upload history missing???');
                return;
            }

            Umi.UI.Menus.Attention('uploads');

            let nameWrap, options, thumb, name, prog;

            const uploadEntry = $e({
                attrs: {
                    className: 'sidebar__user',
                    style: {
                        background: 'linear-gradient(270deg, transparent 0, #111 40%) #222',
                        marginBottom: '1px',
                    },
                },
                child: [
                    {
                        attrs: {
                            className: 'sidebar__user-details',
                            title: fileName,
                            style: {
                                transition: 'height .2s',
                            },
                            onclick: function() {
                                uploadEntry.querySelector('.sidebar__user-options').classList.toggle('hidden');
                            },
                        },
                        child: [
                            {
                                attrs: {
                                    className: 'sidebar__user-avatar hidden',
                                    style: {
                                        transition: 'width .2s, height .2s',
                                    },
                                    onmouseover: function() {
                                        thumb.style.width = '100px';
                                        nameWrap.style.height = thumb.style.height = '100px';
                                    },
                                    onmouseleave: function() {
                                        thumb.style.width = null;
                                        nameWrap.style.height = thumb.style.height = null;
                                    },
                                },
                                created: function(elem) { thumb = elem; },
                            },
                            {
                                attrs: {
                                    className: 'sidebar__user-name',
                                    style: {
                                        whiteSpace: 'nowrap',
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                    },
                                },
                                child: fileName,
                                created: function(elem) { name = elem; },
                            },
                        ],
                        created: function(elem) { nameWrap = elem; },
                    },
                    {
                        tag: 'progress',
                        attrs: {
                            className: 'eeprom-item-progress',
                            max: 100,
                            value: 0,
                        },
                        created: function(elem) { prog = elem; },
                    },
                    {
                        attrs: {
                            className: 'sidebar__user-options',
                        },
                        created: function(elem) { options = elem; },
                    },
                ],
            });

            uploadHistory.insertBefore(uploadEntry, uploadHistory.firstChild);

            return {
                getElement: function() {
                    return uploadEntry;
                },
                remove: function() {
                    $r(uploadEntry);
                },
                clearOptions: function() {
                    options.innerHTML = '';
                },
                hideOptions: function() {
                    options.classList.add('hidden');
                },
                addOption: function(text, arg) {
                    const info = {
                        attrs: {
                            className: 'sidebar__user-option',
                        },
                        child: (text || '').toString(),
                    };

                    if(typeof arg === 'string') {
                        info.tag = 'a';
                        info.attrs.target = '_blank';
                        info.attrs.href = arg;
                    } else
                        info.attrs.onclick = arg;

                    options.appendChild($e(info));
                },
                setThumbnail: function(url) {
                    thumb.style.backgroundImage = "url('" + url + "')";
                    thumb.classList.remove('hidden');
                },
                removeProgress: function() {
                    $r(prog);
                },
                setProgress: function(progress) {
                    prog.value = Math.ceil(progress * 100);
                },
            };
        },
    };
})();
