import { useStores } from '@/app/(root)/AppProviders';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import ImageWithFallback from '@/components/image/ImageWithFallback';
import useClip from '@/hooks/useClip';
import { DownloadIcon } from '@/icons';
import { useApiClient } from '@/lib/apiClient';
import { Clip } from '@/state/clipStore';
import { downloadClipAudio } from '@/utils/download';

export const DownloadLinkMessage = ({
  clipId,
  link,
}: {
  clipId: string;
  link: string;
}) => {
  const clip = useClip(clipId);
  const apiClient = useApiClient();
  const { session } = useStores();
  return (
    <div className='flex w-[300px] max-w-full rounded-xl bg-background-fog-thin p-4 text-sm'>
      <div className='relative mr-4 h-12 w-12 flex-shrink-0'>
        <ImageWithFallback
          src={clip?.clip?.image_url}
          alt={`${clip?.clip?.title || 'Clip'} Artwork`}
        />
      </div>
      <div className='flex flex-1 flex-col'>
        <a
          href={`/song/${clip?.clip?.id}`}
          target='_blank'
          rel='noopener noreferrer'
          className='font-medium text-foreground-secondary hover:text-foreground-primary'
        >
          {clip?.clip?.title || 'Untitled Clip'}
        </a>
        <span className='text-sm text-foreground-tertiary'>
          {clip?.clip?.display_tags}
        </span>
      </div>
      <div className='ml-4 flex flex-col items-end justify-center'>
        <Button
          size={ButtonSize.Small}
          shape={ButtonShape.Pill}
          variant={ButtonVariant.Secondary}
          icon={<DownloadIcon />}
          onClick={() => {
            downloadClipAudio(
              apiClient,
              clip.clip as Clip,
              session,
              'audio',
              link
            );
          }}
        />
      </div>
    </div>
  );
};