import { Prop, toNative } from 'vue-facing-decorator';
import TsxComponent, { Component } from '../../app/vuetsx';
import type { TextBoxTextType } from './textbox';
import TextBox from './textbox';

interface TextBoxWithoutLabelArgs {
	value: string;
	placeholder?: string;
	textType?: TextBoxTextType;
	disabled?: boolean;
	autoCompleteEnabled?: boolean;
	changed: (newValue: string) => void;
	maxLength?: number;
	updateMode?: 'input' | 'change';
	nameAttr?: string;
	keyDown?: (e: KeyboardEvent) => void;
	enterPressed?: (e: KeyboardEvent) => void;
}

@Component
class TextBoxWithoutLabelComponent extends TsxComponent<TextBoxWithoutLabelArgs> implements TextBoxWithoutLabelArgs {
	@Prop() value: string;
	@Prop() placeholder!: string;
	@Prop() disabled!: boolean;
	@Prop() nameAttr?: string;
	@Prop() textType: TextBoxTextType;
	@Prop() autoCompleteEnabled: boolean;
	@Prop() keyDown: (e: KeyboardEvent) => void;
	@Prop() enterPressed: (e: KeyboardEvent) => void;
	@Prop() changed: (newValue: string) => void;
	@Prop() updateMode?: 'input' | 'change';
	@Prop() maxLength: number;

	render(h) {
		return (
			<TextBox
				wrap={false}
				value={this.value}
				placeholder={this.placeholder}
				textType={this.textType}
				disabled={this.disabled}
				autoCompleteEnabled={this.autoCompleteEnabled}
				changed={this.changed}
				maxLength={this.maxLength}
				updateMode={this.updateMode}
				nameAttr={this.nameAttr}
				keyDown={this.keyDown}
				enterPressed={this.enterPressed}
			/>
		);
	}
}

const TextBoxWithoutLabel = toNative(TextBoxWithoutLabelComponent);
export default TextBoxWithoutLabel;