import { observer } from 'mobx-react-lite';
import { useEffect } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import CloseButton from '@/components/button/CloseButton';
import ImageWithFallback from '@/components/image/ImageWithFallback';
import Link from '@/components/link/Link';
import { Clip } from '@/state/clipStore';
import { getClipTitle } from '@/utils/clip';
import { LARGE_IMAGE } from '@/utils/constants';

interface ClipConditionProps {
  clip: Clip;
  task: 'underpainting' | 'overpainting';
}

export const ClipCondition = observer(({ clip, task }: ClipConditionProps) => {
  const { createV2, genForm } = useStores();

  const handleClearClipCondition = async () => {
    if (task === 'underpainting') {
      createV2.setUnderpaintingClip(null);
    } else {
      createV2.setOverpaintingClip(null);
    }
    genForm.resetMvToUserPreference();
    genForm.setTask(null);
  };

  useEffect(() => {
    if (task === 'underpainting') {
      createV2.setActiveLyricsMode('instrumental');
      createV2.setActiveLyricsModeTab('instrumental');
    }
  }, [task, createV2]);

  return (
    <div className='h-auto w-auto rounded-[20px] bg-background-secondary py-3 pr-4 pl-4'>
      <div className='flex w-full flex-col gap-2'>
        <span className='font-sans font-medium'>
          {task === 'underpainting'
            ? 'Adding instrumental to'
            : 'Adding vocals to'}
        </span>
        <div className='flex w-full items-center justify-between'>
          <div className='flex items-center'>
            <div className='h-10 w-7 overflow-hidden rounded-lg'>
              <ImageWithFallback
                imageSize={LARGE_IMAGE}
                className='h-full w-full object-cover'
                src={clip.image_url}
                alt={`Clip image for ${clip.title}`}
              />
            </div>
            <Link
              href={`/song/${clip.id}`}
              className='ml-2 line-clamp-1 font-sans text-lg font-bold font-medium whitespace-pre-wrap hover:underline'
            >
              {getClipTitle(clip)}
            </Link>
          </div>
          <CloseButton
            className='bg-transparent backdrop-blur-none'
            onClick={handleClearClipCondition}
          />
        </div>
      </div>
    </div>
  );
});