import type { VNode } from 'vue';
import type { ILocalizedText } from '../../common/localized-text';
import type { ValidationState } from '../../common/static-wrappers/interfaces/validation-interface';
import type { TranslateGetRequest, TranslateGetResponse } from './translate';
import { Prop, toNative } from 'vue-facing-decorator';
import TsxComponent, { Component } from '../../app/vuetsx';
import { Language } from '../../common/enums/language';
import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
import { HintType } from '../form/form-item-wrapper';
import LocalizedStringInput from './localized-string-input';
import LocalizedStringTextarea from './localized-string-textarea';

interface LocalizedInfoInputArgs {
	label: string | VNode;
	wrap?: boolean;
	value: ILocalizedText;
	placeholder?: string;
	subtitle?: string;
	hint?: string;
	displayType?: 'input' | 'textarea';
	validationState?: ValidationState;
	changed: (e: ILocalizedText) => void;
	mandatory?: boolean;
	translatable?: boolean;
	translateApiMethod?: <RQ extends TranslateGetRequest, RS extends TranslateGetResponse>(data?: RQ) => Promise<RS>;
}

@Component
class LocalizedInfoInputComponent extends TsxComponent<LocalizedInfoInputArgs> implements LocalizedInfoInputArgs {
	@Prop() label: string | VNode;
	@Prop() wrap?: boolean;
	@Prop() value: ILocalizedText;
	@Prop() placeholder!: string;
	@Prop() subtitle!: string;
	@Prop() hint!: string;
	@Prop() displayType: 'input' | 'textarea';
	@Prop() changed: (e: ILocalizedText) => void;
	@Prop() mandatory?: boolean;
	@Prop({ default: false }) translatable: boolean;
	@Prop() translateApiMethod: <RQ extends TranslateGetRequest, RS extends TranslateGetResponse>(data?: RQ) => Promise<RS>;

	getValueForTmrLanguage(lang: Language): string {
		return this.value[lang];
	}

	getValue(value: ILocalizedText): ILocalizedText {
		if (value == null) {
			return {
				cs: null,
				en: null,
				de: null,
				it: null,
				pl: null,
				sk: null,
				hu: null,
			};
		}

		return {
			cs: this.getValueForTmrLanguage(Language.cs),
			en: this.getValueForTmrLanguage(Language.en),
			de: this.getValueForTmrLanguage(Language.de),
			it: this.getValueForTmrLanguage(Language.it),
			pl: this.getValueForTmrLanguage(Language.pl),
			sk: this.getValueForTmrLanguage(Language.sk),
			hu: this.getValueForTmrLanguage(Language.hu),
		};
	}

	valueChanged(e: ILocalizedText): void {
		if (e == null) {
			this.changed(null);
			return;
		}

		const retObj: ILocalizedText = {} as any;
		const addLocalizedValue = (lang: Language, value: string): void => {
			if (!isNullOrEmpty(value)) {
				retObj[lang] = value;
			}
		};

		addLocalizedValue(Language.sk, e.sk);
		addLocalizedValue(Language.cs, e.cs);
		addLocalizedValue(Language.en, e.en);
		addLocalizedValue(Language.de, e.de);
		addLocalizedValue(Language.pl, e.pl);
		addLocalizedValue(Language.it, e.it);
		addLocalizedValue(Language.hu, e.hu);
		this.changed(retObj);
	}

	render(h) {
		if (this.displayType != 'input') {
			return (
				<LocalizedStringTextarea
					label={this.label}
					wrap={this.wrap}
					value={this.getValue(this.value)}
					validationState={this.validationState}
					mandatory={this.mandatory}
					subtitle={this.subtitle}
					hint={this.hint}
					hintType={HintType.Label}
					changed={(e) => {
						this.valueChanged(e);
					}}
					translatable={this.translatable}
					translateApiMethod={this.translateApiMethod}
					supportedLanguages={[
						Language.sk,
						Language.en,
						Language.cs,
						Language.de,
						Language.pl,
						Language.it,
						Language.hu,
					]}
				/>
			);
		} else {
			return (
				<LocalizedStringInput
					label={this.label}
					wrap={this.wrap}
					value={this.getValue(this.value)}
					placeholder={this.placeholder}
					validationState={this.validationState}
					mandatory={this.mandatory}
					subtitle={this.subtitle}
					hint={this.hint}
					hintType={HintType.Label}
					changed={(e) => {
						this.valueChanged(e);
					}}
					translatable={this.translatable}
					translateApiMethod={this.translateApiMethod}
					supportedLanguages={[
						Language.sk,
						Language.en,
						Language.cs,
						Language.de,
						Language.pl,
						Language.it,
						Language.hu,
					]}
				/>
			);
		}
	}
}

const LocalizedInfoInput = toNative(LocalizedInfoInputComponent);
export default LocalizedInfoInput;