/* eslint-disable @next/next/no-img-element */
import {User} from "@/interfaces/user";
import {USER_TYPE_LABELS} from "@/resources/user";
import {calculateAverageLevel} from "@/utils/score";
import {capitalize} from "lodash";
import {ReactElement} from "react";
import ProgressBar from "./Low/ProgressBar";

interface Props {
	user: User;
	items: {
		icon: ReactElement;
		value: string | number;
		label: string;
		tooltip?: string;
	}[];
	removeLevel?: boolean
	children?: ReactElement;
}

export default function ProfileSummary({user, items, removeLevel = false}: Props) {
	return (
		<section className="w-full flex -md:flex-col gap-4 md:gap-8">
			<img
				src={user.profilePicture}
				alt={user.name}
				className="aspect-square h-20 md:h-64 rounded-3xl drop-shadow-xl object-cover -md:hidden"
			/>
			<div className="flex md:flex-col gap-4 md:py-4 w-full -md:items-center">
				<img src={user.profilePicture} alt={user.name} className="aspect-square h-24 md:hidden rounded-3xl drop-shadow-xl object-cover" />
				<div className="flex -md:flex-col justify-between w-full gap-8">
					<div className="flex flex-col gap-2 py-2">
						<h1 className="font-bold text-2xl md:text-4xl">{user.name}</h1>
						<div className="flex items-center gap-2">
							<h6 className="font-normal text-base text-mti-gray-taupe">{user.email}</h6>
							<span> - </span>
							<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
						</div>
					</div>
					{!removeLevel && (
						<ProgressBar
							label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
							percentage={100}
							color="purple"
							className="max-w-xs w-32 md:self-end h-10 -md:hidden"
						/>
					)}
				</div>
				{!removeLevel && (
					<ProgressBar
						label=""
						percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
						color="red"
						className="w-full h-3 drop-shadow-lg -md:hidden"
					/>
				)}

				<div className="flex justify-between w-full mt-8 -md:hidden">
					{items.map((item) => (
						<div className="flex gap-4 items-center" key={item.label}>
							<div
								className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl relative group tooltip tooltip-bottom"
								data-tip={item.tooltip}
							>
								{item.icon}
							</div>
							<div className="flex flex-col">
								<span className="font-bold text-xl">{item.value}</span>
								<span className="font-normal text-base text-mti-gray-dim">{item.label}</span>
							</div>
						</div>
					))}
				</div>
			</div>

			<ProgressBar
				label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
				percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
				color="purple"
				className="w-full md:hidden h-8"
				textClassName="!text-mti-black"
			/>

			<div className="grid grid-cols-2  gap-4 w-full mt-4 md:hidden">
				{items.map((item) => (
					<div className="flex gap-4 items-center" key={item.label}>
						<div className="w-12 h-12 md:w-16 md:h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-lg md:rounded-xl">
							{item.icon}
						</div>
						<div className="flex flex-col">
							<span className="font-bold text-lg md:text-xl">{item.value}</span>
							<span className="font-normal text-sm md:text-base text-mti-gray-dim">{item.label}</span>
						</div>
					</div>
				))}
			</div>
		</section>
	);
}