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

/* eslint jsx-a11y/no-static-element-interactions: warn */
import { IconButton } from '@chakra-ui/react';
import { observer } from 'mobx-react-lite';
import { useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import ImageWithFallback from '@/components/image/ImageWithFallback';
import Link from '@/components/link/Link';
import { SongMenuWithContext } from '@/components/song/newActions/SongMenuWithContext';
import { Tooltip } from '@/components/tooltip/Tooltip';
import { useClipById } from '@/hooks/useClipById';
import { useContestClips } from '@/hooks/useContestClip';
import { PlayIcon, RemixIcon } from '@/icons';
import { ContextType } from '@/logging/contextTypes';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { ParentClip } from '@/state/clipStore';
import { getClipTitle } from '@/utils/clip';

interface RemixOfProps {
  parentClip: ParentClip;
  contextId: string;
  contextType: ContextType;
  onRemixContestRemixClick?: ({
    isFromMobileButton,
  }: {
    isFromMobileButton: boolean;
  }) => void;
}

const RemixOf = observer(
  ({
    parentClip,
    contextId,
    contextType,
    onRemixContestRemixClick,
  }: RemixOfProps) => {
    const { clips, queue, playbar, session } = useStores();
    const [showPlayIcon, setShowPlayIcon] = useState(false);

    const { data: parentClipData } = useClipById(parentClip.id);
    const fullClipData =
      parentClip.id && clips.clipById[parentClip.id]
        ? clips.clipById[parentClip.id]
        : parentClipData
          ? clips.clipById[parentClipData.id]
          : undefined;

    const isUserOwnClip = session.user?.handle === parentClip?.user_handle;

    // Show full details if clip is public OR if it belongs to the current user
    const showFullDetails = parentClip.is_public || isUserOwnClip;
    const parentClipTitle = getClipTitle(parentClip);
    const { isActiveContestBaseClip } = useContestClips();

    const handlePlayClip = () => {
      // If we don't have the full clip data, we can't actually play it
      if (!fullClipData) return;
      if (
        queue.contextType === contextType &&
        queue.contextId === contextId &&
        playbar.clip?.id === fullClipData.id
      ) {
        playbar.togglePlay();
        return;
      }

      const clipsArray = [fullClipData];

      clips.updateClips(clipsArray);

      queue.setPlayContext({
        contextType: contextType,
        contextId: contextId,
        currentIndex: 0,
        clips: clipsArray,
      });

      playbar.playClip(fullClipData);
    };

    const SongArt = () => (
      <div
        className='relative flex h-8 w-6 shrink-0 items-center justify-center overflow-hidden rounded'
        onClick={handlePlayClip}
        onMouseEnter={() => setShowPlayIcon(true)}
        onMouseLeave={() => setShowPlayIcon(false)}
      >
        <ImageWithFallback
          src={parentClip.image_url}
          alt={'Song thumbnail'}
          className='h-full w-full object-cover'
        />
        <IconButton
          aria-label='Play'
          icon={<PlayIcon />}
          position='absolute'
          width={'100%'}
          height={'100%'}
          top='0'
          left='50%'
          transform='translate(-50%, 0)'
          color={'white'}
          transition='opacity 0.3s'
          opacity={showPlayIcon ? 1 : 0}
          _focus={{
            opacity: 1,
          }}
        />
      </div>
    );

    return (
      <div className='flex items-center rounded-lg bg-background-tertiary px-2 py-3 backdrop-blur-xl'>
        <div className='flex w-full items-center'>
          {showFullDetails && <SongArt />}
          <div className='ml-2 flex min-w-0 flex-1 flex-col overflow-hidden'>
            <div className='flex w-full flex-col overflow-hidden'>
              <span className='font-mono text-[11px] text-accent-pink uppercase'>
                Remix of
              </span>
              {showFullDetails && (
                <Link
                  href={`/song/${parentClip.id}`}
                  className='block max-w-full truncate text-sm font-medium hover:underline'
                  title={parentClipTitle}
                  onClick={() => {
                    logWebUserEvent({
                      actionName: 'RemixOfTitleClicked',
                      context: {
                        clipId: parentClip?.id || '',
                        isOwner: isUserOwnClip,
                      },
                    });
                  }}
                >
                  {parentClipTitle}
                </Link>
              )}
            </div>

            <div className='flex min-w-0 items-center gap-2'>
              <div className='h-4 w-4 shrink-0 overflow-hidden rounded-full'>
                <ImageWithFallback
                  src={parentClip.user_avatar_image_url}
                  alt={'User avatar'}
                  className='h-full w-full object-cover'
                />
              </div>
              {showFullDetails ? (
                <Link
                  href={`/@${parentClip.user_handle}`}
                  className='truncate text-sm hover:underline'
                >
                  {parentClip.user_display_name ||
                    parentClip.user_handle ||
                    'Untitled user'}
                </Link>
              ) : (
                <div className='truncate text-sm'>
                  <Link
                    href={`/@${parentClip.user_handle}`}
                    className='hover:underline'
                  >
                    {parentClip.user_display_name ||
                      parentClip.user_handle ||
                      'Untitled user'}
                  </Link>
                  <span>&apos;s song</span>
                </div>
              )}
            </div>
          </div>
          {showFullDetails && fullClipData && (
            <div className='ml-auto shrink-0'>
              <SongMenuWithContext clip={fullClipData} />
            </div>
          )}
          {isActiveContestBaseClip({ clipId: parentClip.id || '' }) &&
            onRemixContestRemixClick && (
              <Tooltip
                label={`Remix "${parentClipTitle}" and Publish it to enter the contest!`}
              >
                <Button
                  shape={ButtonShape.Pill}
                  variant={ButtonVariant.Standard}
                  icon={RemixIcon}
                  iconClassName='text-accent-brand w-6 h-6'
                  size={ButtonSize.Mini}
                  onClick={() => {
                    onRemixContestRemixClick({ isFromMobileButton: false });
                  }}
                />
              </Tooltip>
            )}
        </div>
      </div>
    );
  }
);

export default RemixOf;