/* 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 from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { PauseIcon, PlayIcon } from '@/icons';
import { Clip } from '@/state/clipStore';
import { getClipTitle } from '@/utils/clip';
import { NO_STYLE_FALLBACK, SMALL_IMAGE } from '@/utils/constants';

import OutlineButton from '../button/OutlineButton';
import ImageWithFallback from '../image/ImageWithFallback';
import MetadataBlock from '../section/MetadataBlock';
import SongActions from './SongActions';

interface SongCardAltProps {
  clip: Clip;
  numColumns?: number;
  contextType?: string;
  contextId?: string;
  showActions?: boolean;
  showArtist?: boolean;
  transparent?: boolean;
  actionButtonText?: string;
  bgColor?: string;
  bgOpacity?: string;
  isCentered?: boolean;
  withTitleLink?: boolean;
  withStyleLinks?: boolean;
  onClick: (e: any) => any;
  onActionButtonClick?: () => void;
}

const SongCardAlt: React.FC<SongCardAltProps> = observer(
  ({
    clip,
    contextId,
    contextType,
    showActions = true,
    showArtist = true,
    transparent = false,
    actionButtonText,
    bgColor,
    bgOpacity,
    isCentered,
    withTitleLink = true,
    withStyleLinks = true,
    onClick,
    onActionButtonClick,
  }) => {
    const { playbar, queue } = useStores();

    const isPlaying =
      playbar.clip?.id === clip?.id &&
      (queue.contextId || null) === (contextId || null) &&
      (queue.contextType || null) === (contextType || null);

    if (!clip) return null;

    return (
      <>
        <div
          className={`flex w-full flex-row rounded-xl ${isCentered ? 'justify-around' : ''} px-1 ${transparent ? '' : bgColor ? `bg-${bgColor} ${bgOpacity ? `bg-opacity-${bgOpacity}` : ''}` : 'bg-background-primary'} pt-2 pb-1`}
        >
          <div
            className={clsx(
              'relative mt-2 mb-0 h-20 min-w-14 cursor-pointer overflow-hidden rounded-md border',
              isPlaying ? 'border-foreground-primary' : 'border-border-primary'
            )}
            onClick={onClick}
          >
            <ImageWithFallback
              imageSize={SMALL_IMAGE}
              className='absolute top-0 h-20 w-14 object-cover'
              src={clip.image_url || null}
              alt={`Image for ${clip.title}`}
            />
            <button
              className='absolute top-7 left-5'
              aria-label='Play / pause button'
            >
              {isPlaying ? (
                playbar.isPlaying ? (
                  <PauseIcon className='h-[15px] w-[15px] fill-primary' />
                ) : (
                  <PlayIcon className='h-[15px] w-[15px] fill-primary' />
                )
              ) : null}
            </button>
          </div>
          <div
            className={`flex max-w-40 flex-1 flex-col p-2 pb-0 ${isCentered ? 'justify-center' : ''}`}
          >
            <MetadataBlock
              title={getClipTitle(clip)}
              link={withTitleLink ? `/song/${clip.id}` : undefined}
              subtitle={clip.metadata.tags || NO_STYLE_FALLBACK}
              isClipMetadata
              withStyleLinks={withStyleLinks}
              artistTagProps={
                showArtist && clip.handle
                  ? {
                      displayName: clip.display_name,
                      handle: clip.handle,
                      imageUrl: clip.avatar_image_url || undefined,
                      showAvatar: true,
                    }
                  : undefined
              }
            />
            {actionButtonText && onActionButtonClick ? (
              <OutlineButton
                hasText
                heightPx={32}
                onClick={onActionButtonClick}
              >
                <span className='text-sm'>{actionButtonText}</span>
              </OutlineButton>
            ) : null}
          </div>
        </div>
        {showActions ? (
          <div className='align-center w-full'>
            <SongActions
              asCardActions
              clip={clip}
              onPlayCountClick={onClick}
              className='[&_button]:text-secondary [&_svg]:fill-secondary'
            />
          </div>
        ) : null}
      </>
    );
  }
);

export default SongCardAlt;