import clsx from 'clsx';
import { observer } from 'mobx-react-lite';
import { useMemo } from 'react';
import { deepCamelKeys } from 'string-ts';
import { twMerge } from 'tailwind-merge';

import { useStores } from '@/app/(root)/AppProviders';
import ImageWithFallback from '@/components/image/ImageWithFallback';
import PlaybarSyncVideoPlayer from '@/components/playbar/PlaybarSyncVideoPlayer';
import { ORIGINAL_IMAGE } from '@/utils/constants';

export type OmniplayerClipVisualizerProps = {
  clipId?: string;
  isPlaying?: boolean;
  isActive?: boolean;
};

export type Props = Omit<
  React.HTMLAttributes<HTMLDivElement>,
  keyof OmniplayerClipVisualizerProps
> &
  OmniplayerClipVisualizerProps;

const OmniplayerClipVisualizer: React.FC<Props> = observer((props) => {
  const {
    className,
    clipId,
    isPlaying = true,
    isActive = true,
    ...restProps
  } = props;

  const { clips: clipsStore } = useStores();

  const clip = useMemo(
    () => (clipId ? deepCamelKeys(clipsStore.clipById[clipId]) : null),
    [clipId, clipsStore]
  );

  if (!clip) {
    return null;
  }

  const isSunoShort =
    clip.metadata.isSunoShort &&
    !clip.metadata.isImageToSong &&
    clip.metadata.videoToSongVideoUploadUrl;
  const isVideoCover = clip.videoCoverUrl;
  const videoUrl = isSunoShort
    ? clip.metadata.videoToSongVideoUploadUrl || undefined
    : isVideoCover
      ? clip.videoCoverUrl || undefined
      : undefined;

  return (
    <div className={twMerge('relative', className)} {...restProps}>
      <ImageWithFallback
        className='block h-full w-full cursor-pointer object-cover'
        alt='Song Cover Image'
        imageSize={ORIGINAL_IMAGE}
        src={clip.imageUrl}
      />
      {videoUrl && (
        <div
          className={clsx('absolute inset-0', {
            'max-md:hidden': !(isActive && isPlaying),
          })}
        >
          <PlaybarSyncVideoPlayer
            className='pointer-events-none block h-full w-full object-cover'
            videoUrl={videoUrl}
            isCurrentSong={isActive}
          />
        </div>
      )}
    </div>
  );
});

export default OmniplayerClipVisualizer;