import {ReactNode, useEffect, useState} from "react";
// import { NameItem, NameType } from "../../../api/models/Types";
import { NameItem } from "../../../api/models/Types";
import {GetName} from "../../../api/CommonPropertiesHelper.tsx";
import {Link} from "react-router-dom";
import {MdVideoLibrary} from "react-icons/md";

export interface IGetTitleNamesProps {
	titleId: string  | null | undefined,
	titleNames: Array<NameItem> | null | undefined,
	seasonNames?: Array<NameItem> | null | undefined,
	seasonId?: string | null | undefined,
	episodeNames?: Array<NameItem> | null | undefined,
	episodeId?: string | null | undefined,
	userLanguageId?: string | null | undefined,
	returnToEdit?: boolean | null | undefined,
} 

export function NameBreadcrumbsComponent(props: IGetTitleNamesProps){
	const [titleExists, setTitleExists] = useState<boolean>(false); 
	const [seasonExists, setSeasonExists] = useState<boolean>(false); 
	const [episodeExists, setEpisodeExists] = useState<boolean>(false); 
	
	useEffect(() => {
		setTitleExists(props.titleNames != null && props.titleId != null && props.titleId != '');
		setSeasonExists(props.seasonNames != null && props.seasonId != null && props.seasonId != '');
		setEpisodeExists(props.episodeNames != null && props.episodeId != null && props.episodeId != '');
	}, [props])
	
	return (
		<nav aria-label="breadcrumb">
			<ol className="breadcrumb">
				<li className="breadcrumb-item active" aria-current="page">
					<Link to={'/'} className=''>
						<MdVideoLibrary/>
					</Link>
				</li>

				{titleExists &&
					<li className="breadcrumb-item active" aria-current="page">
						<Link
							to={`${props.returnToEdit == true ? '/admin' : ''}/library/anime/${props.titleId}${props.returnToEdit == true ? '/edit' : ''}`}
							className=''>
							{GetItemName(props.titleNames ?? [], props.userLanguageId)}
						</Link>
					</li>
				}

				{seasonExists &&
					<li className="breadcrumb-item active" aria-current="page">
						<Link
							to={`${props.returnToEdit == true ? '/admin' : ''}/library/anime/${props.titleId}/season/${props.seasonId}${props.returnToEdit == true ? '/edit' : ''}`}
							className=''>
							{GetItemName(props.seasonNames ?? [], props.userLanguageId)}
						</Link>
					</li>
				}

				{episodeExists &&
					<li className="breadcrumb-item active" aria-current="page">
						<Link to={`/library/anime/${props.titleId}${seasonExists ? `season/${props.seasonId}` : ''}episode/${props.episodeId}`} className=''>
							{GetItemName(props.episodeNames ?? [], props.userLanguageId)}
						</Link>
					</li>
				}

				{/*<li className="breadcrumb-item active" aria-current="page">*/}
				{/*	{*/}
				{/*		<Link to={`/admin/library/anime/title/${props.titleId}/season/`}*/}
				{/*			  className='dropdown-item-text link-light link-offset-2 link-body-emphasis link-underline-opacity-25 link-underline-opacity-75-hover'>*/}
				{/*			<div className='row justify-content-between'>*/}
				{/*				<div className='col-auto pe-0'>Добавить сезон</div>*/}
				{/*				<div className='col-auto ps-0 text-info'><FaArrowUpRightFromSquare/></div>*/}
				{/*			</div>*/}
				{/*		</Link>*/}
				{/*	}*/}
				{/*</li>*/}
			</ol>
		</nav>
	);
}

function GetItemName(names: Array<NameItem>, languageId: string | null | undefined): ReactNode {
	const titleNames = GetName(names, languageId);

	if (titleNames != null) {
		if (titleNames.nameInUserLanguage != null) {
			if (titleNames.nameOriginal != null) {
				return (
					<>
						<span className="user-select-all">{titleNames.nameInUserLanguage}</span> / <span className="user-select-all">{titleNames.nameOriginal}</span> [{titleNames.languageCodeIso3}]
					</>
				);
			}
			else{
				return (
					<>
						<span className="user-select-all">{titleNames.nameInUserLanguage}</span>
					</>
				);
			}
		}
		else if (titleNames.nameOriginal != null){
			return (
				<>
					<span className="user-select-all">{titleNames.nameOriginal}</span> [{titleNames.languageCodeIso3}]
				</>
			);
		}
	}

	return (
		<span>NO NAME</span>
	);
}