import { Prop, toNative } from 'vue-facing-decorator';
import { TsxComponentExtendedBase } from '../../app/vuestsx-extended';
import { Component } from '../../app/vuetsx';
import LoadingIndicator from '../loading-indicator';
import './css/table-wrapper.css';

interface TableWrapperArgs {
	fullSizeTable?: boolean;
	isLoading: boolean;
}

@Component
class TableWrapperComponent extends TsxComponentExtendedBase<TableWrapperArgs> implements TableWrapperArgs {
	@Prop() fullSizeTable?: boolean;
	@Prop() isLoading: boolean;

	render(h) {
		return (
			<div class={`dwh-table-wrapper${this.fullSizeTable == true ? ' dwh-table-fullsize' : ''}`}>
				<LoadingIndicator visible={this.isLoading == true} />
				{this.$slots.default?.()}
			</div>
		);
	}
}

const TableWrapper = toNative(TableWrapperComponent);
export default TableWrapper;