import { observer } from 'mobx-react-lite';

import Link from '@/components/link/Link';
import { PersonaMetadata } from '@/state/personaStore';
import { FALLBACK_IMAGE_URL, SMALL_IMAGE } from '@/utils/constants';

import { AvatarMaskShape } from '../image/Avatar';
import ImageWithFallback from '../image/ImageWithFallback';

export interface PersonaTagProps {
  persona?: PersonaMetadata | null;
  showAvatar?: boolean;
  showUser?: boolean;
  fontSize?: number;
  size?: 'small' | 'medium' | 'large';
}

const PersonaTag: React.FC<PersonaTagProps> = observer(
  ({
    persona,
    showAvatar = true,
    showUser = true,
    fontSize,
    size = 'medium',
  }) => {
    const imageSizes = {
      small: 'h-4 w-4',
      medium: 'h-8 w-8',
      large: 'h-10 w-10',
    };

    const fontSizes = {
      small: 'text-[12px]',
      medium: 'text-sm',
      large: 'text-base',
    };

    return !persona || !persona.id ? null : (
      <div
        className={`flex flex-row items-center font-sans font-medium text-foreground-primary ${fontSizes[size]}`}
      >
        {showAvatar ? (
          <div
            className={`relative flex-none ${imageSizes[size]} -mr-0.5 scale-75 cursor-pointer`}
          >
            <div
              className='absolute top-1/2 left-1/4 h-[95%] w-[95%] -translate-x-1/2 -translate-y-1/2 transform overflow-hidden'
              style={AvatarMaskShape.Persona}
            >
              <ImageWithFallback
                imageSize={SMALL_IMAGE}
                className='h-full w-full object-cover'
                src={persona.image_s3_id || FALLBACK_IMAGE_URL}
                alt={`Persona picture for ${persona.name}`}
              />
            </div>
          </div>
        ) : null}
        <div className='flex flex-col'>
          <Link
            href={`/persona/${persona.id}`}
            title={persona.name || 'Untitled Persona'}
            className='line-clamp-1 max-w-full flex-1 break-all hover:underline'
            style={{ fontSize: fontSize || fontSizes[size] }}
          >
            {persona.name || 'Untitled Persona'}
          </Link>
          {showUser && (
            <div
              className={`my-0 flex items-center font-sans text-foreground-secondary ${size === 'large' ? 'text-sm' : 'text-xs'}`}
            >
              <div className='mr-1'>By</div>

              <div className='line-clamp-1 max-w-full flex-1 break-all hover:underline'>
                <Link href={`/@${persona.user_handle}`}>
                  {persona.user_display_name ||
                    persona.user_handle ||
                    'Untitled User'}
                </Link>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
);

export default PersonaTag;