import BaseComponent from "../BaseComponent";
import { fetchData } from "../../Utils/Fetch";
import Utils from "../../Utils/Utils";
import AppData from "../../Common/AppData";


class Login {
    init() {
        if (!jQuery('.login-ui')[0]) {
            return;
        }
        if (jQuery('.login-ui').data('initializied') !== 'true') {
            new LoginHandler(jQuery('.login-ui'));
        }
    }
}

class LoginHandler extends BaseComponent {

    _form;
    _submitBtn;
    _signin_google_btn;

    constructor(component_base_ui) {
        super(component_base_ui);
        this._form = this._component_base_ui.find('.oxygen-form');
        this._submitBtn = this._form.find(':submit');
        this._signin_google_btn = this._component_base_ui.find('.signin_google_btn');
        this.handleRouteChange();
        this._handleEvents();
        this._handleForm();
    }

    _handleEvents() {
        const _this = this;
        this._signin_google_btn.on('click', function(event) {
            event.preventDefault();
            _this._handleGoogleSignup();
        })

        this.handlePopupClickOutside({
            newHash: '',
        });
    }

    _handleForm() {
        const _this = this;
        this._form.on('submit', function(event) {
            event.preventDefault();
            _this._handleSubmit();
            return;
        })
    }

    async _handleSubmit() {

        let payload = {
            password: this._component_base_ui.find('input[name="password"]').val(),
            email: this._component_base_ui.find('input[name="email"]').val(),
        }

        this._submitBtn.attr('disabled', true);
        this._signin_google_btn.attr('disabled', true);
        this.hideFormErrorOnLoad();

        const result = await fetchData('login', 'POST', payload);
        if (result?.status === 200) {
            this.showFormSuccess();
            this.hideForm();
            setTimeout(() => {
                window.location.replace(AppData.getInstance().get('app_url'));
            }, 1000);
        } else {
            this._component_base_ui.find('.form-error').html(result?.message);
            this.showFormError();
        }
        this._submitBtn.attr('disabled', false);
    }

    async _handleGoogleSignup() {
        this._submitBtn.attr('disabled', true);
        const result = await fetchData('google-generate-redirect', 'GET');

        if (result?.status === 200) {
            const auth_url = result?.data?.auth_url;
            window.location.href = auth_url;
        } else {
            alert(`${result?.message}`);
        }
        this._submitBtn.attr('disabled', false);
    }

    onRouteChange(payload) {
        const { key } = payload;
        if (key === 'login') {
            this.checkRecaptcha();
            document.title = payload?.data?.page_title ?? '';

            this.checkRecaptcha();
            this.show();
            this.fadeIn();

            this.hideFormErrorOnLoad();
            this.hideFormSuccessOnLoad();
            this.checkIfIsLoggedIn();
        } else {
            this.hide();
            this.fadeOut();
        }
    }

}

export default Login;