/**
 * Made by mkcomponent.sh
 * * Change to Fileheader info *
*/

// Core imports
import { Component, OnInit } from '@angular/core'
import { trigger, state, style, transition, animate } from '@angular/animations'
// Services
import { UserProfileService } from '@k-core/modules/userProfile/services/svc.userProfile'
import { ActivatedRoute } from '@angular/router'

@Component({
    moduleId: module.id+ '',
    selector: 'userProfile-info',
    templateUrl: './template/t--info.pug',
    styleUrls: ['sty.info.scss'],
    animations: [
        trigger('load', [
            state('out', style({ opacity: 0 })),
            state('in', style({ opacity: 1 })),

            transition('out => in', [
                animate('300ms ease-in')
            ])
        ]),
        trigger('message', [

            state('show', style({ opacity: 1, transform: "translateX(0)"})),
            state('hide', style({ opacity: 0, transform: "translateX(-20px)"})),

            transition('show => hide', [
                animate('100ms ease-in', style({ transform: "translateX(10px)"})),
                animate('75ms ease-in')
            ]),

            transition('hide => show', [
                animate('75ms ease-in', style({ transform: "translateX(10px)" })),
                animate('100ms ease-in')
            ])
        ]),
    ]
})

export class InfoComponent {

    // ---- Variables ---- \\
    userData: any
    loadAnimation: string = 'out'
    submitting: boolean = false
    message = {
        message: '',
        status: '',
        active: 'hide'
    }
    disabled: boolean = false
    mutualAgreement: string = ''
    edit: boolean = false

    constructor(
        private _profile: UserProfileService,
        private _activatedRoute: ActivatedRoute
    ) {
        _activatedRoute.data.subscribe((data) => {
            this.edit = data.edit
        })
    }


    // ---- Lifecycle hooks ---- \\
    ngOnInit() {
        this._profile.getUserInfo().then((response: any) => {
            
            // Fuckery to trigger animation
            new Promise(resolve => {
                this.mutualAgreement = response.data.userData.mutualAgreement
                this.userData = response.data.userData.info

                resolve(this.userData)
            }).then(() => {
                setTimeout(() => {

                    this.loadAnimation = 'in'
                }, 1)
            })
        })
    }


    // ---- Functions ---- \\
    updateProfile() {
        this.submitting = true
        this._profile.setUserInfo(this.userData).then((response) => {

            if(response.status == 'error') {
                this.message = {
                    message: response.data.errorMessage,
                    status: 'error',
                    active: 'show'
                }

                setTimeout(() => {
                    this.message.active = 'hide'
                }, 2500)
            }

            this.submitting = false
        })
    }

    checkValidityOfFields() {

        let disabled: boolean = false
        let inputArray = Array.from(document.querySelectorAll('input[required]'))

        inputArray.forEach((v, k) => {
            if(v.classList.contains('ng-invalid'))
            disabled = true
        })

        this.disabled = disabled
    }
}