import { set } from '@ember/object';
import { equal } from '@ember/object/computed';
import BaseFormInput from './base-form-input';
import $ from 'jquery';

export default BaseFormInput.extend({
    classNames: ['form-group'],
    type: 'text',
    isHidden: equal('type', 'hidden'),
    classNameBindings: ['isHidden:hidden'],
    rows: 8,
    setFilename(filename) {
        const me = this;
        set(me.get('model'), me.get('name'), filename);
    },
    didReceiveAttrs() {
        const me = this;
        me._super(...arguments);

        let isFile = me.get('type') === 'file';
        !me.get('input-class') && 
            me.set('input-class', isFile ? 'col-xs-3' : 'col-xs-12 col-sm-5');
        let image = me.get('image');
        if (isFile && image) {
            me.set('imageUrl', me.get('model.' + image));
        }
    },
    didInsertElement() {
        const me = this;
        me._super(...arguments);
        me.get('type') === 'file' && 
        $('input[type=file]', me.element).ace_file_input({
            no_file: 'No File Choosed...',
            btn_choose: 'Choose',
            btn_change: 'Change',
            droppable: true,
            before_change: function() {
                // this is file element
                const filename = $(this).val();
                console.info('Before File [' + filename + '] Changed.');
                me.setFilename(filename);
                return true;
            },
            before_remove: function() {
                // this is file element
                const filename = $(this).val();
                console.info('Before File [' + filename + '] Removed.');
                me.setFilename(null);
                return true;
            },
            thumbnail: false, //| true | large
            blacklist: 'exe|php|jsp'
        });
    }
});