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

export default Component.extend({
    image: {},
    value: alias('image.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: 'Choose Image',
            btn_choose: 'Choose Image',
            btn_change: null,
            droppable: true,
            style: 'well',
            no_icon: 'ace-icon fa fa-picture-o',
            thumbnail: 'large',
            
            allowExt: ['jpg', 'jpeg', 'png', 'gif'],
            allowMime: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'],

            before_change: function() {
                let filename = $(this).val();
                console.info('Before image [' + filename + '] changed.');
                me.set('value', filename);
                return true;
            },
            before_remove: function() {
                let filename = $(this).val();
                console.info('Before image [' + filename + '] removed.');
                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 image');
                }
                else if(info.error_count['size'] > 0) {
                    me.get('message').warn('Image size too large');
                }
            }
        });
    }
});