import { ReactNode } from "react";
// import { NameItem, NameType } from "../../../api/models/Types";
import { NameItem } from "../../../api/models/Types";
import {GetName} from "../../../api/CommonPropertiesHelper.tsx";

export type TitleNames = {
	titleElement: ReactNode | null
	// titleString: string
	namesUsed: Array<NameItem>,
};

export function GetTitleNames(names: Array<NameItem> | null | undefined, primaryLanguageId?: string | null | undefined, emptyNotFoundValue?: boolean | null | undefined) {
	const titleNames = GetName(names, primaryLanguageId);
	
	if (titleNames != null){
		if (titleNames.nameInUserLanguage != null){
			if (titleNames.nameOriginal != null){
				return {
					titleElement: (
						<>
							<span className="user-select-all">{titleNames.nameInUserLanguage}</span> / <span className="user-select-all">{titleNames.nameOriginal}</span> [{titleNames.languageCodeIso3}]
						</>
					),
					namesUsed: titleNames.namesUsed,
				} as TitleNames;
			}
			else{
				return {
					titleElement: (
						<>
							<span className="user-select-all">{titleNames.nameInUserLanguage}</span>
						</>
					),
					namesUsed: titleNames.namesUsed,
				} as TitleNames
			}
		}
		else if (titleNames.nameOriginal != null){
			return {
				titleElement: (
					<>
						<span className="user-select-all">{titleNames.nameOriginal}</span> [{titleNames.languageCodeIso3}]
					</>
				),
				namesUsed: titleNames.namesUsed,
			} as TitleNames
		}
	}

	return {
		titleElement: (
			<span>{emptyNotFoundValue ? '' : 'NO NAME'}</span>
		),
		namesUsed: [],
	} as TitleNames
}

/*
export function GetTitleNames(names: Array<NameItem> | null | undefined, primaryLanguageId?: string | null | undefined){
	const titleNames = names == null
		? null
		: {
			titleElement: NameComponent(null, null),
			namesUsed: [],
		} as TitleNames;
	if (titleNames != null){
		const nameOriginal = names!.find(q => q.type == NameType.Original)
		if ((primaryLanguageId == null || primaryLanguageId == '') || nameOriginal?.language.id == primaryLanguageId){
			if (nameOriginal != null){
				titleNames.namesUsed.push(nameOriginal);
				// titleNames.titleString = `${nameOriginal.value} [${nameOriginal.language.codeIso3}]`;
				titleNames.titleElement = NameComponent(null, nameOriginal);
			}
		}
		else{
			if (nameOriginal != null){
				titleNames.namesUsed.push(nameOriginal);
				// titleNames.titleString = `${nameOriginal.value} [${nameOriginal.language.codeIso3}]`;
				titleNames.titleElement = NameComponent(null, nameOriginal);
			}

			const originalNameInAnotherLanguage = names!.find(q => q.type == NameType.OriginalInAnotherLanguage && q.language.id == primaryLanguageId);
			if (originalNameInAnotherLanguage != null){
				titleNames.namesUsed.push(originalNameInAnotherLanguage);
				// titleNames.titleString = `${originalNameInAnotherLanguage.value}${nameOriginal != null ? ` / ${titleNames.titleString}` : ''}`;
				titleNames.titleElement = NameComponent(originalNameInAnotherLanguage, nameOriginal ?? null);
			}
			else{
				const translatedName = names!.find(q => q.type == NameType.Translation && q.language.id == primaryLanguageId);
				if (translatedName != null) {
					titleNames.namesUsed.push(translatedName);
					titleNames.titleElement = NameComponent(translatedName, nameOriginal ?? null);
				}
			}
		}	
	}

	return titleNames == null
		? null
		: titleNames;
		// : titleNames.namesUsed.length == 0
		// 	? null
		// 	: titleNames;
}

function NameComponent(nameInUserLanguage?: NameItem | null, nameOriginal?: NameItem | null) : ReactNode {
	if (nameInUserLanguage != null){
		if (nameOriginal != null){
			return (
				<>
					<span className="user-select-all">{nameInUserLanguage.value}</span> / <span className="user-select-all">{nameOriginal.value}</span> [{nameOriginal!.language.codeIso3}]
				</>
			)
		}
		else{
			return (
				<>
					<span className="user-select-all">{nameInUserLanguage.value}</span>
				</>
			)
		}
	}
	else if (nameOriginal != null){
		return (
			<>
				<span className="user-select-all">{nameOriginal.value}</span> [{nameOriginal!.language.codeIso3}]
			</>
		)
	}
	else{
		return (
			<span>NO NAME</span>
		)
	}
  }
  */