import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";

import { StatusIndicator } from "$/ui/objects/StatusIndicator.tsx";

export type Props<Tag extends HTMLTag> = Polymorphic<{
	"as"?: Tag;
	"src"?: string;
	"icon"?: JSX.Element;
	"children"?: JSX.Element;
	"class"?: string;
	"circle"?: boolean;
	"placeholder"?: boolean;
	"color"?: `hsl(${number}, ${number}%, ${number}%)`;
	"color2"?: `hsl(${number}, ${number}%, ${number}%)`;
	"color-angle"?: number | `${number}`;
	"size"?: "xs" | "sm" | "lg" | "xl" | "xxl" | "xxxl";
	"status"?: "accent" | "positive" | "negative" | "warning";
}>;

const hslRegex = /^hsl\(([\d.]+), ([\d.]+%), ([\d.]+%)\)$/;

export const Avatar = <T extends HTMLTag = "div">({
	children,
	as: Tag = "div" as T,
	src,
	icon,
	circle,
	placeholder,
	color,
	color2,
	"color-angle": colorAngle,
	size,
	status,
	class: cls,
	...props
}: Props<T>) => (
	<Tag
		class:list={[
			"o-avatar",
			{
				"o-avatar--circle": circle,
				"o-avatar--placeholder": placeholder,
				"o-avatar--colored": color && !color2,
				"o-avatar--colored-gradient": color && !!color2,
				[`o-avatar--${size}`]: !!size,
			},
			cls,
		]}
		style={{
			"--o-avatar--bg-angle": colorAngle,
			"--o-avatar--bg-color--h": color?.match(hslRegex)?.[1],
			"--o-avatar--bg-color--l": color?.match(hslRegex)?.[3],
			"--o-avatar--bg-color--s": color?.match(hslRegex)?.[2],
			"--o-avatar--bg-color-2--h": color2?.match(hslRegex)?.[1],
			"--o-avatar--bg-color-2--l": color2?.match(hslRegex)?.[3],
			"--o-avatar--bg-color-2--s": color2?.match(hslRegex)?.[2],
		}}
		{...props}
	>
		{status && <StatusIndicator class="o-avatar__status" status={status} />}
		{icon && <div class="o-avatar__icon u-ai-end u-jc-end">{icon}</div>}

		{src ? (
			<img alt="" class="o-avatar__content" src={src} />
		) : (
			<span class="o-avatar__content">{children}</span>
		)}
	</Tag>
);