import { Component, OnInit } from '@angular/core';
import { ModalDialogParams } from '@nativescript/angular';
import { dismissSoftKeybaord } from '~/core/utils/dismiss-keyboard';
import EduEventSearch, { EduEventSearchFormData, EduEventSortFilter } from '~/pages/event/types/EduEventSearch';
import { Picker, getPickerFormattedYearsAfter, formatPickerValues } from '~/pages/event/util';
import { EduEventType } from '../../../entities/edu-event-search.types';

const currentYear = new Date().getFullYear()
const startYear = 1980
const numberOfYears = currentYear - startYear + 11;

export interface EduEventSearchResult {
    eventSearch: EduEventSearch
    onlyQualification: boolean;
    isTouched: boolean;
}
@Component({
    selector: 'event-search-modal',
    moduleId: module.id,
    templateUrl: './edu-event-search-modal.component.html',
})
export class EduEventSearchModalComponent implements OnInit {
    eventSearch: EduEventSearchFormData;

    formattedEventTypes: Array<Picker> = [{ key: null, label: 'vše' }];
    formattedEventGroups: Array<Picker> = [{ key: null, label: 'vše' }];
    formattedYears: Array<Picker> = getPickerFormattedYearsAfter(startYear, numberOfYears);
    formTouched: boolean = false;
    sortFilter: EduEventSortFilter;

    types: EduEventType[]
    constructor(
        private params: ModalDialogParams,
    ) {
    }

    ngOnInit(): void {
        const { searchParams: { eventName, year, group, type },
            types, groups, sortFilterParams
        } = this.params.context;

        this.types = types;
        this.eventSearch = {
            eventName, year,
            group: group && group.id,
            type: type && type.id,
            onlyQualification: sortFilterParams.onlyQualification
        };

        this.formattedEventTypes = formatPickerValues(this.types);
        this.formattedEventGroups = formatPickerValues(groups);
    }

    onSearch() {
        dismissSoftKeybaord();
        const selType = this.eventSearch.type && this.formattedEventTypes
            .find((type) => type.key === this.eventSearch.type.toString());
        const selGroup = this.eventSearch.group && this.formattedEventGroups
            .find((group) => group.key === this.eventSearch.group.toString());

        const formRes: EduEventSearchResult = {
            eventSearch: {
                eventName: this.eventSearch.eventName,
                year: this.eventSearch.year,
                group: selGroup && { id: selGroup.key, displayName: selGroup.label },
                type: selType && { id: selType.key, displayName: selType.label },
            },
            onlyQualification: this.eventSearch.onlyQualification,
            isTouched: this.formTouched,
        };
        this.params.closeCallback(formRes)
    }

    onFormChange(e) {
        if (e.propertyName !== 'onlyQualification') {
            this.formTouched = true;
        }
        if (e.propertyName === 'group') {
            this.formattedEventTypes = formatPickerValues(this.types
                .filter(t => t.ID_EventEducationGroup === this.eventSearch.group))
        }
    }
    close() {
        this.params.closeCallback();
    }

    onBackButton(): void {
        this.params.closeCallback();
    }
}
