import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {NameValue} from '@varmasagi/ics-common-types';
import {IcsActionPlanService} from './ics-action-plan.service';
import {isNullOrUndefined} from 'util';
import {DistributionRepresentation} from './types/distribution';
import {FormValues} from './types/form-values';
import {ActionPlanRepresentation} from './types/action-plan';
import {Observable} from 'rxjs';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {Router} from '@angular/router';
import {map, startWith} from 'rxjs/operators';
import {IcsToastService} from '@varmasagi/ics-toast';

@Component({
    selector: 'ics-action-plan',
    templateUrl: './ics-action-plan.component.html',
    styleUrls: ['./ics-action-plan.component.scss']
})
export class IcsActionPlanComponent implements OnInit {


    public formValues: FormValues;
    public kpiTarget: string;
    public formSubmitAttempt = false;

    public actionform: FormGroup;

    public filteredAreas: Observable<NameValue[]>;
    public filteredMetrics: Observable<NameValue[]>;
    public filteredCategory: Observable<NameValue[]>;

    public loaded = false;

    @Input()
    dialogMode: boolean;

    @Input() actionPlan: ActionPlanRepresentation;


    @Output() cancel$: EventEmitter<void>;
    @Output() next$: EventEmitter<ActionPlanRepresentation>;


    constructor(
        private router: Router,
        private fb: FormBuilder,
        private service: IcsActionPlanService,
        private toast: IcsToastService
    ) {
        this.cancel$ = new EventEmitter<void>();
        this.next$ = new EventEmitter<ActionPlanRepresentation>();
    }

    ngOnInit() {
        this.actionform = this.fb.group({
            Situation: [this.actionPlan.situationDescription, Validators.required],
            Recommended: [''],
            Criticality: ['', Validators.required],
            Category: ['', Validators.required],
            Metric: ['', Validators.required],
            endDate: ['', Validators.required],
            Area: ['', Validators.required],
            Assignee: ['', Validators.required],
            kpiTarget: ['', Validators.required],
            completeStatus: [''],
            textResponse: [''],
            imageDocUpload: ['']

        });
        this.filteredAreas = this.actionform.controls['Area'].valueChanges
            .pipe(startWith(''), map(val => this.dataFilter(val, 'area')));
        this.filteredCategory = this.actionform.controls['Category'].valueChanges
            .pipe(startWith(''), map(val => this.dataFilter(val, 'category')));
        this.filteredMetrics = this.actionform.controls['Metric'].valueChanges
            .pipe(startWith(''), map(val => this.dataFilter(val, 'metric')));
        this.init();

    }

    dataFilter(val: string | NameValue | any, key: string): NameValue[] {
        let data = [];
        try {
            data = this.formValues[key].filter(option => {
                if (typeof val === 'object') {
                    val = val as NameValue;
                    return option.name.toLowerCase().includes(val.name.toLowerCase());
                } else {
                    return option.name.toLowerCase().includes(val.toLowerCase());
                }
            });
        } catch (err) {

        }
        return data;
    }

    private init() {

        this.formValues = undefined;

        this.service.getFormValues(this.actionPlan.application.value)
            .subscribe((res: FormValues) => {
                    this.formValues = res;
                    this.actionPlanDefaultValues();
                    this.triggerLoader();
                },
                error1 => this.handleError(error1.body)
            )
        ;
    }

    /**
     * Assign defaults values to actionPlan if null or undefined,
     * otherwise get the one from CreateActionService.
     * */
    private actionPlanDefaultValues(): void {
        if (isNullOrUndefined(this.actionPlan.proposedDate)) {
            this.actionPlan.proposedDate = new Date();
        }
        if (isNullOrUndefined(this.actionPlan.area)) {
            this.actionPlan.area = this.formValues.area[0];
        }
        if (isNullOrUndefined(this.actionPlan.metric)) {
            this.actionPlan.metric = this.formValues.metric[0];
        }
        if (isNullOrUndefined(this.actionPlan.category)) {
            this.actionPlan.category = this.formValues.category[0];
        }
        if (isNullOrUndefined(this.actionPlan.critical)) {
            this.actionPlan.critical = this.formValues.critical[1];
        }
    }


    navigateBack() {

        this.cancel$.emit();
    }

    navigateNext() {
        this.formSubmitAttempt = true;
        if (this.actionform.valid) {

            if (this.dialogMode) {
                this.service
                    .createAction(this.actionPlan)
                    .subscribe(res => {

                            const status = res.status;
                            if (status === 201) {
                                this.onActionCreated(res.body.message);
                            }
                        },
                        error1 => {

                            this.handleError(error1.body.message || 'Error');
                        }
                    );
            } else {

                this.next$.emit(this.actionPlan);
            }
        }
    }

    private onActionCreated(message: string) {
        this.toast.success(message);
        this.next$.emit(this.actionPlan);
    }

    /**
     * Compares two NameValue objects.
     *
     * Helper function for mat-select to check if ngModel and value are equal.
     *
     * */
    public compareNameValue(a1: NameValue, a2: NameValue): boolean {
        return a1.name === a2.name && a1.value === a2.value;
    }

    /**
     * Compares two Distribution objects.
     *
     * Helper function for mat-select to check if ngModel and value are equal.
     *
     * */
    public compareDistribution(a1: DistributionRepresentation, a2: DistributionRepresentation): boolean {
        return a1.name === a2.name && a1.id === a2.id && a1.group === a2.group;
    }

    displayNameForAutoComplete(val: NameValue) {
        return val.name || '';
    }

    previousDateFilter = (d: Date): boolean => {
        const today = new Date();
        // Prevent previous dates.
        return d.setHours(0, 0, 0, 0) >= today.setHours(0, 0, 0, 0);
    }

    /**
     *
     * handling error explicitly to support different rxjs versions
     * */
    private handleError(message: string) {
        this.toast.error(message);
    }

    private triggerLoader = () => {
        this.loaded = !this.loaded;
    }

}