import { Component, OnInit } from '@angular/core';
import { RouterExtensions } from '@nativescript/angular';
import { Select, Store } from '@ngxs/store';
import { FeedbackType } from 'nativescript-feedback';
import { DataFormEventData, EntityProperty, RadDataForm } from 'nativescript-ui-dataform';
import { Observable } from 'rxjs';
import { withLatestFrom } from 'rxjs/operators';
import { feedbackMessage } from '~/pages/material/utils/feedback-messages';
import { ApplicationNewData } from '../../entities/applicationNewData';
import { MembershipApplicationInsertOutput } from '../../entities/output/membershipApplicationInsertOutput';
import { CreateApplicationInsert } from '../../state-mgmt/application.actions';
import { ApplicationNewState } from '../../state-mgmt/application.state';

@Component({
    selector: 'ApplicationNew',
    moduleId: module.id,
    templateUrl: './application-new.component.html',
    styleUrls: ['./_application-new.component.scss']
})

export class ApplicationNewComponent implements OnInit {
    @Select(ApplicationNewState.getApplicationInsert) applicationInsert$: Observable<MembershipApplicationInsertOutput>;

    applicationData: ApplicationNewData;
    androidParentDataVisibility = android.view.View.VISIBLE;

    constructor(
        private store: Store,
        private routerExtensions: RouterExtensions
    ) {}

    ngOnInit(): void {
        this.applicationData = new ApplicationNewData();
    }

    onPropertyValidated(event: DataFormEventData): void {
        const editorFirstName = (<RadDataForm>event.object).getPropertyByName('firstNameParent').editor;
        const editorSecondName = (<RadDataForm>event.object).getPropertyByName('secondNameParent').editor;
        if (event.propertyName === 'isChild') {
            if (editorFirstName.android) {
                this.androidParentDataVisibility = this.androidParentDataVisibility === android.view.View.VISIBLE ? android.view.View.GONE : android.view.View.VISIBLE;
                editorFirstName.android.rootLayout().setVisibility(this.androidParentDataVisibility);
                editorSecondName.android.rootLayout().setVisibility(this.androidParentDataVisibility);
            } else {
                (<RadDataForm>event.object).getPropertyByName('firstNameParent').hidden = !event.entityProperty.valueCandidate;
                (<RadDataForm>event.object).getPropertyByName('secondNameParent').hidden = !event.entityProperty.valueCandidate;
            }
        }
    }

    isValid(emailProp: EntityProperty): boolean {
        return emailProp.isValid && this.applicationData.isValid();
    }

    sendApplication(emailProp: EntityProperty) {
        if (!this.isValid(emailProp)) {
            feedbackMessage(FeedbackType.Error, 'Odesílání e-přihlášky', `Vyplňte prosím všechny údaje.`);

            return;
        }
        this.store.dispatch(new CreateApplicationInsert(
            1,
            this.applicationData.firstName,
            this.applicationData.secondName,
            this.applicationData.isChild,
            this.applicationData.firstNameParent,
            this.applicationData.secondNameParent,
            this.applicationData.email))
                .pipe(withLatestFrom(this.applicationInsert$))
                .subscribe(([_, insert]) => {
                    feedbackMessage(FeedbackType.Success, 'Odesílání e-přihlášky', `Vaša e-přihláška byla odeslaná.`);
                    this.routerExtensions.back();
                }, err => {
                    console.log(err);
                    feedbackMessage(FeedbackType.Error, 'Odesílání e-přihlášky', `Při odesílání e-přihlášky došlo k chybě. Zkontrolujte prosím zadané hodnoty.`);
                });
    }

    onBackButton(): void {
        this.routerExtensions.back();
    }
}
