import type { Language } from '../../common/enums/language';
import type { ILocalizedText } from '../../common/localized-text';
import type LocalizedText from '../../common/localized-text';
import { Prop } from 'vue-facing-decorator';
import PowerduckState from '../../app/powerduck-state';
import { TsxComponentExtendedBase } from '../../app/vuestsx-extended';
import { Component } from '../../app/vuetsx';
import { LanguageUtils } from '../../common/utils/language-utils';
import TextButton from '../button/text-button';

interface TranslateArgs {
	value: ILocalizedText | LocalizedText;
	currentLangId: Language;
	langArr: LanguageUtils.LanguageListItem[];
	changeValue: (langId: Language, value: string) => void;
	getActualValue: (langId: Language, value: ILocalizedText | LocalizedText) => string;
	apiMethod: <RQ extends TranslateGetRequest, RS extends TranslateGetResponse>(data?: RQ) => Promise<RS>;
}

export class TranslateGetRequest {
	fromLang: string;
	toLang: string[];
	text: string;
}

export class TranslateGetResponse {
	result: LocalizedText;
}

@Component
export default class Translate extends TsxComponentExtendedBase<TranslateArgs> implements TranslateArgs {
	@Prop() value: ILocalizedText | LocalizedText;
	@Prop() currentLangId: Language;
	@Prop() langArr: LanguageUtils.LanguageListItem[];
	@Prop() apiMethod: <RQ extends TranslateGetRequest, RS extends TranslateGetResponse>(data?: RQ) => Promise<RS>;
	@Prop() changeValue: (langId: Language, value: string) => void;
	@Prop() getActualValue: (langId: Language, value: ILocalizedText | LocalizedText) => string;
	translateLoading = false;

	async translateValue(
		value: string,
		fromLang: Language,
		langArr: LanguageUtils.LanguageListItem[],
	) {
		console.log('value', value);
		this.translateLoading = true;
		const toLang = langArr.filter(x => !this.getActualValue(x.id, this.value))?.map(x => x.id);
		console.log('toland', toLang, langArr);
		if (toLang.length === 0) {
			this.translateLoading = false;
			return;
		}

		const resp = await this.tryGetDataByArgs<TranslateGetResponse, TranslateGetRequest>({
			blockRoot: false,
			apiMethod: this.apiMethod,
			requestArgs: {
				fromLang,
				toLang,
				text: value,
			},
		});

		if (resp?.result != null) {
			for (const key in resp.result) {
				const langCode = LanguageUtils.getLanguageEnum(key);
				this.changeValue(langCode, resp.result[key]);
			}
		} else {
			console.error('Error while getting translation');
		}

		this.translateLoading = false;
	}

	render(h) {
		return this.translateLoading
			? (
					<div class="d-flex flex-row gap-1 align-items-center">
						<div class="spinner-border spinner-border-sm" role="status">
							<span class="sr-only">Loading...</span>
						</div>
						<span>Translating...</span>
					</div>
				)
			: (
					<TextButton
						icon="icon icon-translate"
						text={PowerduckState.getResourceValue('translateFromThisLanguage')}
						clicked={() => {
							this.translateValue(
								this.getActualValue(this.currentLangId, this.value),
								this.currentLangId,
								this.langArr,
							);
						}}
					/>
				);
	}
}