import {
    getFiles,
    setFiles
} from './util';


export default function Upload(eventBus, overlays) {

    function createFileBox(element) {

        var $overlay = Ext.get(Ext.DomHelper.createDom(Upload.OVERLAY_HTML));

        var $fileIcon = $overlay.down('.icExe');

        $fileIcon.on('click', function (e) {
            e.preventDefault();
            eventBus.fire('files.click', { element: element, fileIcon: $fileIcon });
        });

        function renderFiles(element, $fileIcon) {
            var files = getFiles(element);
            $fileIcon[files.length ? 'addCls' : 'removeCls']('icExeR');
        }

        // attach an overlay to a node
        overlays.add(element, 'files', {
            position: {
                bottom: 24,
                left: 3
            },
            html: $overlay.dom
        });

        renderFiles(element, $fileIcon);

        eventBus.on('files.updated', function (event) {
            var element = event.element,
                files = event.files,
                fileIcon = event.fileIcon;

            setFiles(element, files);
            renderFiles(element, fileIcon);
        });
    }

    eventBus.on('shape.added', function (event) {
        var element = event.element;

        if (element.labelTarget ||
            !element.businessObject.$instanceOf('bpmn:Task')) {

            return;
        }

        defer(function () {
            createFileBox(element);
        });

    });
}

Upload.OVERLAY_HTML =
    '<div class="files-overlay">' + 
        '<div class="icExe"></div>' +
    '</div>'

Upload.FILE_HTML =
    '<div class="file">' +
        '<div data-text /><a href class="delete icon-delete" data-delete></a>' +
    '</div>';

Upload.$inject = [
    'eventBus',
    'overlays'
];

// helpers
function defer(fn) {
    setTimeout(fn, 0);
}