/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import clsx from 'clsx';
import React, { useCallback, useState } from 'react';
import { twMerge } from 'tailwind-merge';

import CardPlayPauseButton from '@/components/button/CardPlayPauseButton';
import Avatar from '@/components/image/Avatar';
import Link from '@/components/link/Link';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { FALLBACK_IMAGE_URL, SMALL_IMAGE } from '@/utils/constants';

import ImageWithFallback from '../image/ImageWithFallback';
import VerifiedBadge from '../timbaland/VerifiedBadge';

export type Props = React.HTMLAttributes<HTMLDivElement> & {
  artistHref?: string;
  artistName?: string;
  avatarImageUrl?: string;
  imageClassName?: string;
  imageUrl?: string;
  isCurrentSong?: boolean;
  isPlaying?: boolean;
  isVerifiedArtist?: boolean;
  onArtistClick?: React.MouseEventHandler;
  onPlayPauseClick?: React.MouseEventHandler;
  onTitleClick?: React.MouseEventHandler;
  title?: string;
  titleExtras?: React.ReactNode;
  titleHref?: string;
};

export const MicroPlayer: React.FC<Props> = (props) => {
  const {
    artistHref = '',
    artistName = '',
    avatarImageUrl = '',
    children,
    imageClassName,
    imageUrl,
    isCurrentSong,
    isPlaying,
    isVerifiedArtist,
    onArtistClick,
    onPlayPauseClick,
    onTitleClick,
    title = 'Untitled',
    titleExtras,
    titleHref = '',
    ...restProps
  } = props;

  const [isHovered, setIsHovered] = useState(false);
  const handleMouseEnter: React.MouseEventHandler<HTMLDivElement> =
    useCallback(() => {
      setIsHovered(true);
    }, []);
  const handleMouseLeave: React.MouseEventHandler<HTMLDivElement> =
    useCallback(() => {
      setIsHovered(false);
    }, []);

  const showPlayPauseButton = isHovered || isPlaying || isCurrentSong != null;

  return (
    <div
      {...restProps}
      className={twMerge(
        '@container flex flex-row items-center gap-3',
        props.className
      )}
    >
      <div
        className={twMerge(
          'relative cursor-pointer overflow-clip rounded-md',
          'h-[77px] w-[56px] shrink-0',
          imageClassName
        )}
        onClick={(e) => {
          onPlayPauseClick?.(e);
          logWebUserEvent({
            actionName: 'V4PromoSongPlayClicked',
          });
        }}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        <ImageWithFallback
          className='absolute inset-0 h-full w-full object-cover'
          src={imageUrl || FALLBACK_IMAGE_URL}
          alt={`Image for ${title || 'Untitled'}`}
        />
        <div className='absolute inset-0 flex items-center justify-center overflow-hidden'>
          <CardPlayPauseButton
            className={clsx('h-8 w-8 p-2 text-primary transition duration-75', {
              'opacity-0': !showPlayPauseButton,
            })}
            icon={!isPlaying ? 'play' : isHovered ? 'pause' : 'playing'}
          />
        </div>
      </div>
      <div className='flex flex-1 flex-col gap-1'>
        <div className='font-sans text-sm font-medium @xs:text-base'>
          <Link
            className='hover:underline'
            href={titleHref}
            onClick={onTitleClick}
          >
            {title || 'Untitled'}
          </Link>
          {titleExtras}
        </div>
        <div className='flex flex-row items-center gap-1'>
          {avatarImageUrl && (
            <div className='relative'>
              <Link href={artistHref} onClick={onArtistClick}>
                <Avatar
                  className='h-6 w-6'
                  src={avatarImageUrl}
                  imageSize={SMALL_IMAGE}
                  alt='User avatar'
                />
              </Link>
              {isVerifiedArtist && (
                <VerifiedBadge className='absolute end-0 bottom-0 h-2 w-2 drop-shadow-avatar-overlay' />
              )}
            </div>
          )}
          {artistName && (
            <div className='line-clamp-1 max-w-full flex-1 font-sans text-xs font-medium break-all opacity-40 hover:underline @xs:text-sm'>
              <Link href={artistHref} onClick={onArtistClick}>
                {artistName}
              </Link>
            </div>
          )}
        </div>
        {children && <div className='@container mt-2 flex-1'>{children}</div>}
      </div>
    </div>
  );
};

export default MicroPlayer;