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

/* eslint jsx-a11y/no-static-element-interactions: warn */
import clsx from 'clsx';
import { observer } from 'mobx-react-lite';
import React, { useMemo } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { Clip } from '@/state/clipStore';
import { ORIGINAL_IMAGE } from '@/utils/constants';

import ImageWithFallback from '../image/ImageWithFallback';
import PlaybarSyncVideoPlayer from '../playbar/PlaybarSyncVideoPlayer';
import { SunoShortType } from './songUtils';

interface SongCardProps {
  clip: Clip;
  selected?: boolean;
  onClick?: (e: any) => any;
  rank?: number;
  isLarge?: boolean;
  index?: number;
  onMenuButtonClick?: () => void;
  onAddToPlaylist?: () => void;
  numColumns?: number;
  contextType?: string;
  contextId?: string;
  preview?: boolean;
  rounded?: boolean;
  sunoShortType?: SunoShortType;
}

const LargeSongCard: React.FC<SongCardProps> = observer(
  ({ clip, onClick, preview = false, rounded = true, sunoShortType }) => {
    const { playbar } = useStores();

    const isCurrentSong = useMemo(
      () =>
        // clip id should be playing
        playbar.clip?.id === clip?.id,
      [playbar.clip?.id]
    );

    const isVideoShort =
      sunoShortType == SunoShortType.VIDEO &&
      clip.metadata?.video_to_song_video_upload_url;
    const isVideoCover = !!clip.video_cover_url;
    const isVideo = isVideoShort || isVideoCover;
    const videoUrl =
      clip.metadata?.video_to_song_video_upload_url || clip.video_cover_url;

    if (!clip) return null;

    return (
      <div
        className={clsx('relative mb-4 cursor-pointer overflow-hidden', {
          'aspect-232/280 w-full': preview,
          'h-72 w-[204px]': !preview,
          'rounded-none sm:rounded-none md:rounded-none lg:rounded-xl xl:rounded-xl':
            rounded,
          'border-dumbo-900': isCurrentSong,
          'border-dumbo-50': !isCurrentSong,
        })}
        onClick={onClick}
      >
        <ImageWithFallback
          className='absolute inset-0 h-full w-full object-cover'
          imageSize={ORIGINAL_IMAGE}
          src={clip.image_url || null}
          alt={`Image for ${clip.title}`}
        />
        {isVideo && (
          <PlaybarSyncVideoPlayer
            videoUrl={videoUrl}
            className='absolute inset-0 h-full w-full object-cover'
            isCurrentSong={isCurrentSong}
          />
        )}
      </div>
    );
  }
);

export default LargeSongCard;