import Component from '@ember/component';
import { alias } from '@ember/object/computed';
import $ from 'jquery'

export default Component.extend({
    file: {},
    value: alias('file.file'),
    'no-file': 'Choose file',
    'btn-choose': 'Choose file',
    didReceiveAttrs() {
        const me = this;
        me._super(...arguments);
    },
    didInsertElement() {
        let me = this;
        me._super(...arguments);

        $('input[type=file]', me.element).ace_file_input({
            no_file: me.get('no-file'),
            btn_choose: me.get('btn-choose'),
            btn_change: null,
            droppable: true,
            style: 'well',
            no_icon: 'ace-icon fa fa-files-o',

            // thumbnail: 'large',
            // allowExt: ['jpg', 'jpeg', 'png', 'gif'],
            // allowMime: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'],

            before_change: function() {
                const filename = $(this).val();
                me.set('value', filename);
                return true;
            },
            before_remove: function() {
                me.set('value', null);
                return true;
            }
        }).on('file.error.ace', function(e, info) {
            if ($(this)[0] === e.target) {
                if (info.error_count['ext'] > 0 || info.error_count['mime'] > 0) {
                    me.get('message').warn('Invalid file');
                }
                else if(info.error_count['size'] > 0) {
                    me.get('message').warn('File size too large');
                }
            }
        });
    }
});