<template>
	<span :class="$style.root">
		<Mfm
			:class="$style.name"
			:text="user.name || user.username"
			:plain="true"
			:nowrap="nowrap"
			:custom-emojis="user.emojis"
		/>
		<span
			v-if="user.isVerified"
			v-tooltip.noDelay="'認証済み'"
			:class="[$style.badge, $style.verified]"
			aria-label="認証済み"
		>✓</span>
		<span
			v-for="badge in minorBadges"
			:key="badge"
			v-tooltip.noDelay="`${badge}バッジ`"
			:class="[$style.badge, $style[`minor${badge}`]]"
			:aria-label="`${badge}バッジ`"
		>{{ badge }}</span>
		<span
			v-for="plan in plans"
			:key="plan.id"
			v-tooltip.noDelay="plan.name"
			:class="[$style.badge, $style.plan]"
			:aria-label="plan.name"
		>
			<i v-if="isIconClass(plan.icon)" :class="plan.icon"></i>
			<span v-else>{{ plan.icon }}</span>
		</span>
	</span>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import type * as misskey from "iceshrimp-sdk";

const props = withDefaults(
	defineProps<{
		user: misskey.entities.User;
		nowrap?: boolean;
	}>(),
	{
		nowrap: true,
	},
);

const minorBadges = computed(() =>
	(props.user.minorBadges ?? []).filter((badge) =>
		["K", "T", "E"].includes(badge),
	),
);

const plans = computed(() => props.user.plans ?? []);

function isIconClass(icon: string) {
	return icon.split(/\s+/).some((part) => part.startsWith("ph-"));
}
</script>

<style lang="scss" module>
.root {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	max-width: 100%;
	unicode-bidi: isolate;
	vertical-align: text-bottom;
}

.name {
	min-width: 0;
}

.badge {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	border-radius: 999px;
	font-size: 0.72em;
	font-weight: 800;
	line-height: 1;
	color: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.badge > span {
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.verified {
	background: #2563eb;
}

.minorK {
	background: #16a34a;
}

.minorT {
	background: #f59e0b;
	color: #111827;
}

.minorE {
	background: #db2777;
}

.plan {
	background: #334155;
	font-size: 0.78em;
}
</style>
