import $ from "jquery";

import Scroll from "../../utils/Scroll";

class Form {
    constructor($form) {
        this.form = $form;

        this.data = {
            action: this.form.attr('action'),
            method: this.form.attr('method'),
            reset: this.form.find('.form__reset'),
            ajax: this.form.data('ajax') !== false ? true : void 0
        };

        this.form.on('submit', (event) => {
            this.submitHandler(event);
        });

        this.data.reset.on('click', (event) => {
            this.clearHandler($(event.currentTarget), event);
        });
    }

    submitHandler(event) {
        if (!this.validateForm()) {
            this.send();
        }

        if (!$('html').hasClass('scroll-disable') && !this.form.hasClass('form_dirty')) {
            Scroll.goToElement(this.form, 650);
        }

        event.preventDefault();
    }

    clearHandler($this, event) {
        let $form = $this.parents('form');

        this.clearForm($form);

        event.preventDefault();
    }

    validateField($element) {
        const $field = {
            type: $element.attr('type'),
            val: $element.val()
        };

        switch ($field.type) {
            case 'text':
                return $field.val.replace(/\s+/g, '');
            case 'email':
                let pattern = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

                return pattern.test($field.val);
            case 'password':
                if ($element.hasClass('js-password-repeat')) {
                    let password = $('.js-password').val(),
                        passwordRepeat = $('.js-password-repeat').val();

                    return password === passwordRepeat;
                }

                return $field.val.replace(/\s+/g, '');
            default:
                return $field.val.replace(/\s+/g, '');
        }
    }

    validateForm() {
        const $inputs = this.form.find('input, select, textarea').filter('[required]:visible');

        let error = false,
            countError = 0;

        this.form.removeClass('form_dirty');
        this.form.find('.input-row').removeClass('input-row_wrong');

        $inputs.each((index, element) => {
            let $this = $(element);

            if (!this.validateField($this)) {
                countError++;

                this.form.addClass('form_dirty');
                $this.closest('.input-row').addClass('input-row_wrong');
                error = true;

                if (countError < 2) {
                    $this.focus();
                }
            }
        });

        return error
    }

    clearForm($form) {
        $form.removeClass('form_success');
        $form[0].reset();
    }

    send() {
        if (this.data.ajax) {
            this.form.addClass('form_loading');

            $.ajax({
                type: this.data.method,
                url: this.data.action,
                data: new FormData(this.form[0]),
                cache: false,
                contentType: false,
                processData: false,
                success: (data) => {
                    let response = JSON.parse(data).response;

                    this.form.removeClass('form_loading');

                    if (response === 'success') {
                        this.form.addClass('form_success');
                        this.form[0].reset();
                    }

                    if (response === 'already') {
                        this.form.addClass('form_already');

                        setTimeout(() => {
                            this.form.removeClass('form_already');
                        }, 6000);
                    }

                    if (response !== 'success' && response !== 'already') {
                        this.form.addClass('form_error');

                        setTimeout(() => {
                            this.form.removeClass('form_error');
                        }, 6000);
                    }
                },
                error: () => {
                    this.form.removeClass('form_loading');
                    this.form.addClass('form_error');

                    setTimeout(() => {
                        this.form.removeClass('form_error');
                    }, 6000);
                }
            });
        } else {
            this.form.submit();
        }
    }
}

export default Form;