import { Component, EventEmitter, Output } from '@angular/core';
import { Input } from '@angular/core';

import { ListViewEventData } from 'nativescript-ui-listview';
import { Person } from '~/pages/event/types/common.types';
import { RouterExtensions } from '@nativescript/angular';
import { transitionOptions } from '~/constants/shared.constants';
import { ScrollTopBarListComponent } from '../scroll-top-bar-list/scroll-top-bar-list.component';
import { personDetailIcon } from '~/constants/icons';

interface ListType extends Person {
    extended: boolean;
}
@Component({
    selector: 'PersonList',
    moduleId: module.id,
    templateUrl: './person-list.component.html',
    styleUrls: ['./_person-list.component.scss']
})
export class PersonListComponent extends ScrollTopBarListComponent<ListType> {
    @Input()
    isLoading: boolean = true;
    @Input()
    isStatic: boolean = false;

    @Output()
    refreshData = new EventEmitter();
    personDetailIcon = personDetailIcon;

    constructor(
        private routerExtensions: RouterExtensions,
    ) { super(); }

    onPullToRefreshInitiated(args: ListViewEventData) {
        setTimeout(() => {
            this.refreshData.emit()
            const listView = args.object;
            listView.notifyPullToRefreshFinished();
        }, 100);
    }

    onPersonTap(personId: number) {
        setTimeout(() => {
            this.routerExtensions.navigate(['search/list', personId, false], { transition: transitionOptions });
        }, 10);
    }
    templateSelector = (item: ListType, index: number, items: any) =>
        (this.isStatic || item.extended) && "selected";
}
