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

/* eslint jsx-a11y/no-static-element-interactions: warn */
import clsx from 'clsx';
import { useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import Link from '@/components/link/Link';
import { SongMenuWithContext } from '@/components/song/newActions/SongMenuWithContext';
import { ChainIcon, PauseIcon, PlayIcon } from '@/icons';
import { getClipTitle } from '@/utils/clip';
import { SMALL_IMAGE } from '@/utils/constants';

import { Clip } from '../../state/clipStore';
import ImageWithFallback from '../image/ImageWithFallback';
import { SkeletonBone } from '../layout/Skeleton';
import SpinnerSVG from '../svg/SpinnerSVG';

export interface ContinuedFromSongRowProps {
  rowKey: string;
  clip: Clip;
  onPlay: () => any;
  showTags?: boolean;
  selected?: boolean;
  index?: number;
  playlistId?: string;
  partNumber: number;
  isSongPage?: boolean;
}

const ContinuedFromSongRow = ({
  clip,
  onPlay,
  index = undefined,
  playlistId = undefined,
  partNumber,
  isSongPage = false,
}: ContinuedFromSongRowProps) => {
  const { playbar: playbarStore, queue: queueStore } = useStores();

  const isPlaying = queueStore.currentPlayingSongIsRemoved
    ? false
    : index !== undefined
      ? queueStore.activeQueue === 'context' &&
        queueStore.contextQueueIndex === index &&
        queueStore.isPlaylistCurrentContext(playlistId)
      : playbarStore.clip?.id === clip?.id;

  const [showPlayIcon, setShowPlayIcon] = useState(false);

  const isProcessing =
    clip?.status === 'queued' ||
    clip?.status === 'submitted' ||
    clip?.status === 'processing';

  return (
    <div className='mb-4 flex flex-row'>
      <div
        className='relative h-[41px] w-[30px] cursor-pointer overflow-hidden'
        onClick={onPlay}
        aria-label='Play Song'
        onMouseEnter={() => setShowPlayIcon(true)}
        onMouseLeave={() => setShowPlayIcon(false)}
      >
        {clip?.image_url ? (
          <ImageWithFallback
            imageSize={SMALL_IMAGE}
            alt='Song Image'
            src={clip?.image_url}
            className={clsx(
              'h-[41px] w-[30px] shrink-0 rounded-sm object-cover',
              {
                'border border-white': isPlaying,
              }
            )}
          />
        ) : (
          <SkeletonBone className='size-[30px]' />
        )}
        {isProcessing && (
          <div className='absolute inset-0 flex h-full w-full items-center justify-center'>
            <SpinnerSVG />
          </div>
        )}
        <Button
          className={clsx(
            'absolute top-0 left-1/2 -translate-x-1/2 transition-colors duration-300 focus:opacity-100',
            {
              'opacity-100': playbarStore.isPlaying || showPlayIcon,
              'opacity-0': !(playbarStore.isPlaying || showPlayIcon),
            }
          )}
          variant={ButtonVariant.Standard}
          shape={ButtonShape.Rounded}
          size={ButtonSize.Small}
          aria-label={playbarStore.isPlaying ? 'Pause' : 'Play'}
          icon={isPlaying && playbarStore.isPlaying ? PauseIcon : PlayIcon}
          enableHoverState
        />
      </div>
      <div className='flex flex-1 items-center overflow-hidden pl-3'>
        <div>
          <div className='text-[12px] leading-[16px]'>
            <div className='flex items-center font-sans'>
              <ChainIcon />
              <span className='ml-1'>Part {partNumber}</span>
            </div>
          </div>
          <div className='text-[14px] leading-[16px]'>
            <Link
              href={`/song/${clip.id}/`}
              className={`truncate ${isSongPage ? 'max-w-[40%]' : 'max-w-[150px]'}`}
            >
              {getClipTitle(clip)}
            </Link>
          </div>
        </div>
      </div>
      <div className='-mr-2 ml-auto flex shrink-0 items-center'>
        {clip && <SongMenuWithContext clip={clip} />}
      </div>
    </div>
  );
};

export default ContinuedFromSongRow;