import type { User } from 'firebase/auth';
import { twJoin } from 'tailwind-merge';
import { Md5 } from 'ts-md5';

const size = 120;

const GravatarIcon = () => (
  <svg
    className="absolute right-1 bottom-1 size-3 fill-current text-slate-800/20 dark:text-slate-100/20"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 27 27"
    role="presentation"
    aria-hidden="true"
  >
    <path d="M10.8 2.699v9.45a2.699 2.699 0 005.398 0V5.862a8.101 8.101 0 11-8.423 1.913 2.702 2.702 0 00-3.821-3.821A13.5 13.5 0 1013.499 0 2.699 2.699 0 0010.8 2.699z"></path>
  </svg>
);

export const Avatar = ({
  user = { email: '', displayName: '' } as User,
}: {
  anonymous: boolean;
  user: User | undefined;
}) => {
  if ((user?.email?.length ?? 0) < 2) {
    return null;
  }

  return (
    <div className="flex flex-col items-end gap-6">
      <span className="relative">
        <span className="border-primary-800 bg-primary-800 mr-2 inline-block size-14 overflow-hidden rounded-full border-2">
          <Gravatar email={user.email} name={user.displayName} />
        </span>
        <GravatarIcon />
      </span>
    </div>
  );
};

const Gravatar = ({
  email,
  name,
}: {
  email: string | null;
  name: string | null;
}) => {
  email = email || '';
  name = name || 'Anonymous Coward';

  const gravatar = `https://www.gravatar.com/avatar/${Md5.hashAsciiStr(
    email.toLowerCase(),
  )}?size=${size}&default=blank`;

  const initials = getInitials(name);

  return (
    <>
      <div className="bg-primary-900 relative inline-flex h-full w-full items-center justify-center">
        <div
          aria-hidden="true"
          className={twJoin(
            'text-center text-2xl font-extralight text-white opacity-60 select-none dark:text-black',
            initials.length < 3 && 'text-3xl',
            initials.length === 3 && 'text-2xl',
          )}
        >
          {initials}
        </div>
        <img
          src={gravatar}
          className="absolute top-0 left-0"
          alt={`${name}'s Gravatar`}
        />
      </div>
    </>
  );
};

const getInitials = (name: string) => {
  name = name.trim();

  if (name.length <= 3) {
    return name;
  }

  return name
    .split(/\s+/)
    .map((w) => [...w][0])
    .slice(0, 3)
    .join('');
};