var VPLogin = (function () {
    let vp_template = `
    
    <!-- Back Button -->
    <div class="login-wrapper d-flex align-items-center justify-content-center">
        <div class="custom-container">
            <div class="text-center px-4"><img class="login-intro-img" :src="logo" alt="">
            </div>
            <h5 class="mt-3 mb-3 text-center">{{$store.state.config.appname}}</h5>
            <!-- Register Form -->
            <div class="register-form mt-4">
                <h6 class="mb-3 text-center">Silahkan masukan nomor induk dan password</h6>
                <div v-show="errorMsg" class="alert custom-alert-2 alert-danger alert-dismissible fade show" role="alert"><i class="bi bi-x-circle"></i>{{errorMsg}}
                    <button class="btn btn-close btn-close-white position-relative p-1 ms-auto" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                <form @submit.prevent="login">
                    <div class="form-group">
                        <input autofocus v-model="nomor_induk" class="form-control" type="text" placeholder="Nomor Induk">
                    </div>
                    <div class="form-group position-relative">
                        <input v-model="password" class="form-control" id="psw-input" :type="passoff?'text':'password'" placeholder="Password">
                        <div @click="passoff=!passoff" class="position-absolute" id="password-visibility">
                            <i v-if="passoff" class="d-block bi bi-eye-slash"></i>
                            <i v-else class="bi bi-eye"></i>
                        </div>
                    </div>
                    <button :disabled="!loginable" class="btn btn-primary w-100" type="submit">
                        <span v-if="!loading">Masuk</span>
                        <div v-else class="spinner-border text-secondary" role="status"><span class="visually-hidden">Loading...</span></div>
                    </button>
                </form>
            </div>
        </div>
    </div>
    `;
    return {
        template: vp_template,
        props: ['appname', 'logo'],
        name: 'login-page',
        data() {
            return {

                errorMsg: '',
                nomor_induk: '',
                password: '',
                loading: false,
                passoff: false,
            }
        },
        mounted() {
            this.loadOSC();
            this.loadOffline();
        },
        methods: {
            login() {
                if (!this.loginable) return this.errorMsg = 'Mohon isi semua kolom!';
                if (this.loading) return false;
                this.loading = true;
                this.errorMsg = '';
                let data = {
                    [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
                    nomor_induk: this.nomor_induk,
                    password: this.password
                };
                axios({
                    method: 'POST',
                    data: data,
                    url: window.location.href,
                }).then((response) => {
                    if (!isObject(response.data)) return this.errorMsg = gaem({
                        response
                    }, response.data);
                    window.location.href = response.data.redirect_url;
                }, (error) => {
                    this.errorMsg = gaem(error);
                    switch (error.response.status) {
                        case 404:
                            try {
                                this.$store.state.config.csrf.value = error.response.data.messages.csrf;
                            } catch (error) {

                            }
                            break;
                        case 403:
                            try {
                                this.$store.state.config.csrf.value = error.response.data.messages.csrf;
                            } catch (error) {

                            }
                            break;
                    }
                }).finally(() => this.loading = false);
            },
            loadOSC() {
                axios({
                    method: 'GET',
                    url: this.$store.state.config.base_url + '/osc',
                }).then((response) => {
                    if (!response.data.app_id) return;
                    this.osc = response.data;
                    try {
                        this.removeOneSignalIdentifier();
                    } catch (error) {

                    }
                }, (error) => { });
            },
            loadOffline() {
                axios({
                    method: 'GET',
                    url: this.$store.state.config.base_url + '/offline',
                }).then((response) => {
                }, (error) => { });
            },
            removeOneSignalIdentifier() {
                OneSignal.push(() => {
                    OneSignal.init({
                        appId: this.osc.app_id,
                        safari_web_id: this.osc.safari_web_id,
                        notifyButton: {
                            enable: false,
                        },
                        allowLocalhostAsSecureOrigin: true,
                    });
                    OneSignal.removeExternalUserId();
                });
            }
        },
        computed: {
            loginable() {
                if (this.nomor_induk.length < 1) return false;
                if (this.password.length < 1) return false;
                return true;
            },
        }
    }
})();
