import type { TableColumn } from './datatable';
import { Prop, toNative } from 'vue-facing-decorator';
import PowerduckState from '../../app/powerduck-state';
import TsxComponent, { Component } from '../../app/vuetsx';
import Button from '../button/button';
import { ButtonLayout } from '../button/button-layout';
import CheckBox from '../input/checkbox';
import Modal from '../modal/modal';
import ModalBody from '../modal/modal-body';
import ModalFooter from '../modal/modal-footer';

interface ColVisModalArgs {
	columns: TableColumn[];
	changed: (columns: TableColumn[]) => void;
}

interface TableColumnColVis extends TableColumn {
	_enforceVisible?: boolean
}

@Component
class ColVisModalComponent extends TsxComponent<ColVisModalArgs> implements ColVisModalArgs {
	@Prop() columns!: TableColumn[];
	@Prop() changed: (columns: TableColumn[]) => void;

	show() {
		(this.$refs.colVisDialog as typeof Modal.prototype).show();
	}

	handleColumnChanged(col: TableColumnColVis, visible: boolean): void {
		col.visible = visible;

		if (col.visible == true) {
			col._enforceVisible = true;
		} else {
			if (col._enforceVisible != null) {
				delete col._enforceVisible;
			}
		}

		this.changed(this.columns);
	}

	render(h) {
		return (
			<Modal ref="colVisDialog" title={PowerduckState.getResourceValue('colVisLabel')}>
				<ModalBody>
					{this.columns
						&& this.columns.map(col => (
							<div class="row mb-2 pd-colvis-modal-row">
								<div class="col-md-12 pd-colvis-modal-chbwrap">
									<CheckBox label={null} wrap={false} checkboxLabelHtml={col.caption} value={col.visible != false} changed={e => this.handleColumnChanged(col, e)} />
								</div>
							</div>
						))}
				</ModalBody>
				<ModalFooter>
					<Button dismissModal={true} text="OK" layout={ButtonLayout.Default} clicked={() => { }} />
				</ModalFooter>
			</Modal>
		);
	}
}

const ColVisModal = toNative(ColVisModalComponent);
export default ColVisModal;