import React from "react";
import { isColorDark } from "~/lib/color";
import { cn, getHexColorFromString, getInitials } from "~/lib/utils";
import type { UsersId } from "~/schemas/public/Users";

const colorOptions = new Map<string, string>();

export const getUserColor = (str: string) => {
	if (colorOptions.has(str)) {
		// biome-ignore lint/style/noNonNullAssertion: <exists>
		return colorOptions.get(str)!;
	}
	const usercolor = getHexColorFromString(str);
	colorOptions.set(str, usercolor);
	return usercolor;
};
/*
export const UserAvatarOld = ({
	userId,
	username,
	className,
}: {
	userId: UsersId;
	username?: string;
	className?: string;
}) => {
	const userColor = getUserColor(userId);

	return (
		<Avatar className={cn("size-20", className)}>
			<AvatarFallback
				style={{
					backgroundColor: userColor,
					color: colorIsDarkSimple(userColor) ? "#FFFFFF" : "#000000",
				}}
			>
				{username && getInitials(username)}
			</AvatarFallback>
		</Avatar>
	);
};
*/
/*
export const UserAvatar2 = (
	props: {
		userId: UsersId;
		username?: string;
	} & Omit<
		FacehashProps,
		| "name"
		| "colors"
		| "initialsCount"
		| "intensity3d"
		| "variant"
		| "showInitial"
	>,
) => {
	const { userId, username, ...rest } = props;
	const value = `${username && getInitials(username)}${userId}`;
	return (
		<Facehash
			{...rest}
			className={cn("size-20 rounded-full", rest.className)}
			colors={user_colors}
			initialsCount={2}
			intensity3d="none"
			name={value}
			showInitial={username !== undefined}
			variant="solid"
		/>
	);
};
*/
const user_colors = [
	"#2D3436",
	"#535C68",
	"#636E72",
	"#FAB1A0",
	"#FF7675",
	"#FF4757",
	"#EE5253",
	"#D63031",
	"#FF9F43",
	"#FDCB6E",
	"#F1C40F",
	"#55E6C1",
	"#00B894",
	"#26DE81",
	"#2ECC71",
	"#00CEC9",
	"#81ECEC",
	"#74B9FF",
	"#0984E3",
	"#4834D4",
	"#6C5CE7",
	"#A29BFE",
	"#A55EEA",
	"#6D214F",
];

function stringHash(str: string): number {
	let hash = 0;
	for (let i = 0; i < str.length; i++) {
		const char = str.charCodeAt(i);
		hash = (hash << 5) - hash + char;
		hash &= hash; // Convert to 32bit integer
	}
	return Math.abs(hash);
}

export const UserAvatar = (
	props: {
		userId: UsersId;
		username?: string;
	} & React.HTMLAttributes<HTMLDivElement>,
) => {
	const { userId, username, className, ...rest } = props;
	const value = `${username && getInitials(username)}${userId}`;

	const colorIndex = React.useMemo(() => {
		const hash = stringHash(value);
		const colorsLength = user_colors.length ?? 1;
		const _colorIndex = hash % colorsLength;

		return _colorIndex;
	}, [value]);
	const userColor = user_colors[colorIndex];
	return (
		<div
			{...rest}
			className={cn(
				"@container flex size-20 items-center justify-center rounded-full",
				className,
			)}
			style={{
				backgroundColor: userColor,
				color: userColor
					? isColorDark(userColor, 180)
						? "#FFFFFF"
						: "#oklch(0.24 0 0)"
					: "#oklch(0.24 0 0)",
			}}
		>
			<span className="text-[40cqw] tracking-wide">
				{username && getInitials(username)}
			</span>
		</div>
	);
};
