import type { IWebApiClient } from '../../common/IWebClient';
import type { DataTableMobileBehavior, DataTableOnSortedArgs, TableColumn } from './datatable';
import { Prop, toNative } from 'vue-facing-decorator';
import TsxComponent, { Component } from '../../app/vuetsx';
import { WebClientApiMethod } from '../../common/IWebClient';
import DataTable, { DataTableFilterMode, RowIndexMode } from './datatable';

interface DataTableStaticArgs {
	id: string;
	cssClass?: string;
	columns: TableColumn[];
	rows: any[];
	fullSizeTable?: boolean;
	fullSizeHasButtonBelow?: boolean;
	topVisible?: boolean;
	allowMassOperations?: boolean;
	allowExport?: boolean;
	hidePagination?: boolean;
	checkboxesVisible?: boolean;
	preserveOrderBy?: boolean;
	preserveFilter?: boolean;
	checkboxButtonsVisible?: boolean;
	sortableRows?: boolean;
	mobileBehavior?: DataTableMobileBehavior;
	rowCheckstateChanged?: (row: any, checked: boolean, selectedRows: any[]) => void;
	sortComplete?: (args: DataTableOnSortedArgs) => void;
}

@Component
export class DataTableStaticComponent extends TsxComponent<DataTableStaticArgs> implements DataTableStaticArgs, IWebApiClient {
	@Prop() id: string;
	@Prop() cssClass: string;
	@Prop() columns: TableColumn[];
	@Prop() rows: any[];
	@Prop() fullSizeTable: boolean;
	@Prop() fullSizeHasButtonBelow: boolean;
	@Prop() topVisible: boolean;
	@Prop() allowMassOperations: boolean;
	@Prop() allowExport: boolean;
	@Prop() checkboxesVisible!: boolean;
	@Prop() hidePagination!: boolean;
	@Prop() preserveOrderBy!: boolean;
	@Prop() preserveFilter!: boolean;
	@Prop() checkboxesTitle!: string;
	@Prop() checkboxButtonsVisible!: boolean;
	@Prop() sortableRows!: boolean;
	@Prop() mobileBehavior!: DataTableMobileBehavior;
	@Prop() rowCheckstateChanged?: (row: any, checked: boolean, selectedRows: any[]) => void;
	@Prop() sortComplete?: (args: DataTableOnSortedArgs) => void;

	webClient: boolean = true;
	apiArgs: any = {};

	mounted() {
		this.reloadData();
	}

	updated() {
		this.reloadData();
	}

	exportExcel(): void {
		this.getTable().exportExcel();
	}

	normalizeStringForSearch(str: string): string {
		return this.getTable().normalizeStringForSearch(str);
	}

	private post(_data: any): Promise<any> {
		return new Promise((resolve) => {
			const rowArr = [...(this.rows || [])];

			resolve({
				TotalCount: rowArr.length,
				TotalFilteredCount: rowArr.length,
				Rows: rowArr,
				InitRows: this.rows,
			});
		});
	}

	private getTable(): typeof DataTable.prototype {
		return this.$refs.innerTable as typeof DataTable.prototype;
	}

	reloadData(): void {
		this.getTable().reloadData();
	}

	getSelectedRows(): any[] {
		return this.getTable().getSelectedRows();
	}

	getCssClass(): string {
		return `dt-static${this.cssClass ? ` ${this.cssClass}` : ''}`;
	}

	render(h) {
		return (
			<DataTable
				id={this.id}
				ref="innerTable"
				apiClient={this}
				apiArgs={this.apiArgs}
				rowIndexMode={RowIndexMode.Index}
				apiMethod={WebClientApiMethod.Post}
				filterMode={DataTableFilterMode.Clientside}
				checkboxButtonsVisible={this.checkboxButtonsVisible}
				preserveFilter={this.preserveFilter}
				checkboxesVisible={this.checkboxesVisible}
				rowCheckstateChanged={this.rowCheckstateChanged}
				columns={this.columns}
				cssClass={this.getCssClass()}
				topVisible={this.topVisible == true}
				bottomVisible={false}
				hidePagination={this.hidePagination}
				allowMassOperations={this.allowMassOperations}
				allowExport={this.allowExport}
				fullSizeTable={this.fullSizeTable}
				sortableRows={this.sortableRows}
				sortComplete={this.sortComplete}
				preserveOrderBy={this.preserveOrderBy}
				fullSizeHasButtonBelow={this.fullSizeTable}
				mobileBehavior={this.mobileBehavior}
			/>
		);
	}
}

const DataTableStatic = toNative(DataTableStaticComponent);
export type DataTableStaticType = typeof DataTableStatic.prototype;
export default DataTableStatic;