Aquarius.component.define('Frontend/Form', function ($element, options) {
    var defaults = {
        action: null,
        validate: true,
        classes: {
            error: 'error',
            errorList: 'error-list',
            processing: 'processing'
        },
        ignoredFields: [
            '___parameters'
        ]
    };

    function Form() {
    }

    Form.prototype = {
        init: function () {
            var self = this;
            var promise = this.parent.init();

            this.setOptions(Aquarius.extend(defaults, options));

            var $button = self.$element.find('button');

            this.namespace.listen('submit:after', function (params) {
                self.removeErrors();

                $button.prop('disabled', false).addClass(self.options.classes.processing);

                if (params.result.isValid) {
                    if (params.result.redirectUrl) {
                        window.location = params.result.redirectUrl;
                    } else if (self.$element.data('redirect-url')) {
                        window.location = self.$element.data('redirect-url');
                    } else {
                        // self.$element.hide().siblings('.success-page').show();
                        self.$element.hide();
                        $('.success-page').show();
                        var top = document.getElementById('success-page').offsetTop;
                        window.scrollTo(0, top);
                    }
                } else {
                    self.addErrors(params.result.messages);
                }
            });

            this.namespace.listen('submit:before', function (params) {
                $button.prop('disabled', true).removeClass(self.options.classes.processing);
            });

            this.file();

            return promise;
        },

        file: function () {
            const reader = new FileReader();
            const fileInput = document.getElementsByName("image");

            $("input[name=image]").change(function (e) {
                const f = e.target.files[0];
                reader.addEventListener('load', function () {
                    $('.file-preview').remove();
                    $('.bootstrap-filestyle').append('<div class="file-preview">' +
                        '<img class="file-preview-image" src="' + reader.result + '"/>' +
                        '</div>');
                });
                reader.readAsDataURL(f);
            });
        },
    };

    return Form;
}).extends('Form');