import type { VNode } from 'vue';
import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
import type { FormItemWrapperArgs, MarginType } from '../form/form-item-wrapper';
import type { CheckBoxSkin } from './checkbox';
import { Prop, toNative } from 'vue-facing-decorator';
import TsxComponent, { Component } from '../../app/vuetsx';
import CheckBox from './checkbox';
import './css/checkbox-without-label.css';

interface CheckBoxArgs extends FormItemWrapperArgs {
	value: boolean;
	checkboxLabelHtml?: string;
	disabled?: boolean;
	placeholder?: string;
	skin?: CheckBoxSkin;
	changed?: (newValue: boolean) => void;
}

@Component
class CheckBoxWithoutLabelComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxArgs {
	@Prop() label!: string | VNode;
	@Prop() cssClass!: string;
	@Prop() labelButtons!: DropdownButtonItemArgs[];
	@Prop() subtitle!: string;
	@Prop() checkboxLabelHtml!: string;
	@Prop() disabled!: boolean;
	@Prop() value!: boolean;
	@Prop() placeholder!: string;
	@Prop() mandatory!: boolean;
	@Prop() wrap!: boolean;
	@Prop() maxWidth?: number;
	@Prop() skin!: CheckBoxSkin;
	@Prop() marginType?: MarginType;
	@Prop() hint: string;
	@Prop() appendIcon: string;
	@Prop() prependIcon: string;
	@Prop() appendClicked: () => void;
	@Prop() prependClicked: () => void;
	@Prop() changed: (newValue: boolean) => void;

	render (h) {
		return (
			<div class="cb-without-label">
				<CheckBox
					label=""
					cssClass={this.cssClass}
					mandatory={this.mandatory}
					wrap={true}
					disabled={this.disabled}
					appendIcon={this.appendIcon}
					prependIcon={this.prependIcon}
					marginType={this.marginType}
					hint={this.hint}
					appendClicked={this.appendClicked}
					prependClicked={this.prependClicked}
					maxWidth={this.maxWidth}
					validationState={this.validationState}
					labelButtons={this.labelButtons}
					subtitle={this.subtitle}
					value={this.value}
					changed={this.changed}
					checkboxLabelHtml={this.checkboxLabelHtml}
					skin={this.skin}
				/>
			</div>
		);
	}
}

const CheckBoxWithoutLabel = toNative(CheckBoxWithoutLabelComponent);
export default CheckBoxWithoutLabel;