<script lang="ts">
	import type { MediaTitle } from '$lib/AniList/media';
	import * as tooltipper from '$lib/Tooltip/tooltip';
	import { abbreviate as abbreviated } from '$lib/Utility/string';
	import settings from '$stores/settings';
	import * as wanakana from 'wanakana';

	export let title: MediaTitle;
	export let abbreviate = false;
	export let abbreviateTo = 20;
	export let tooltip = false;
</script>

{#if $settings.displayTitleFormat === 'native'}
	{#if $settings.displayFurigana}
		<span
			title={title.english || title.romaji || title.native}
			use:tooltipper.default
			data-tooltip-disable={tooltip}
		>
			<ruby>
				{abbreviate ? abbreviated(title.native, abbreviateTo) : title.native}
				<rt>
					{abbreviate
						? abbreviated(wanakana.toKana(title.native), abbreviateTo)
						: wanakana.toKana(title.native)}
				</rt>
			</ruby>
		</span>
	{:else}
		<span
			title={title.english || title.romaji || title.native}
			use:tooltipper.default
			data-tooltip-disable={tooltip}
		>
			{abbreviate ? abbreviated(title.native, abbreviateTo) : title.native}
		</span>
	{/if}
{:else if $settings.displayTitleFormat === 'romaji'}
	<span
		title={title.english || title.romaji || title.native}
		use:tooltipper.default
		data-tooltip-disable={tooltip}
	>
		{abbreviate ? abbreviated(title.romaji, abbreviateTo) : title.romaji}
	</span>
{:else}
	<span title={title.romaji || title.native} use:tooltipper.default data-tooltip-disable={tooltip}>
		{abbreviate
			? abbreviated(title.english || title.romaji || title.native, abbreviateTo)
			: title.english || title.romaji || title.native}
	</span>
{/if}
