import * as ko from "knockout";
import template from "./reportsByApiEditorView.html";
import { Component, OnMounted, Param, Event } from "@paperbits/common/ko/decorators";
import { WidgetEditor } from "@paperbits/common/widgets";
import { ReportsByApiModel } from "../reportsByApiModel";
import { widgetEditorSelector } from "..";


@Component({
    selector: widgetEditorSelector,
    template: template
})
export class ReportsByApiEditor implements WidgetEditor<ReportsByApiModel> {
    public readonly pageSize: ko.Observable<number>;

    constructor() {
        this.pageSize = ko.observable();
    }

    @Param()
    public model: ReportsByApiModel;

    @Event()
    public onChange: (model: ReportsByApiModel) => void;

    @OnMounted()
    public async initialize(): Promise<void> {
        this.pageSize(this.model.pageSize);
        this.pageSize.subscribe(this.applyChanges);
    }

    private applyChanges(): void {
        this.model.pageSize = this.pageSize();
        this.onChange(this.model);
    }
}