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

import { useStores } from '@/app/(root)/AppProviders';
import {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import Button from '@/components/button/ReactAriaCompatButton';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { Clip } from '@/state/clipStore';
import { isComplete, isValidModelVersion } from '@/utils/clip';
import { isProjectsFeatureEnabled } from '@/utils/session';

export const GetFullSongButton = observer(({ clip }: { clip: Clip }) => {
  const { clips, project, session } = useStores();

  const isHidden = useCallback(() => {
    const isInvalidModel = !isValidModelVersion(clip);
    const isNotOwner = session?.user?.id !== clip?.user_id;
    const hasNoHistory = !clip?.metadata?.history;
    const isInfill = Boolean(clip?.metadata?.infill);
    const isStem = clip?.metadata?.type === 'stem';

    return Boolean(
      isInvalidModel || isNotOwner || hasNoHistory || isInfill || isStem
    );
  }, [clip, session?.user?.id]);

  const handleClick = async () => {
    if (!isComplete(clip)) {
      return;
    }
    if (isProjectsFeatureEnabled(session)) {
      await project.setCurrentProjectToClipProject(clip);
    }
    clips.runConcat(clip?.id, !!clip?.metadata.infill, {
      editSessionId: clip?.metadata?.edit_session_id,
    });
    logWebUserEvent({
      actionName: 'SongRowGetFullSongClicked',
      principalObjectType: 'song',
      principalObjectValue: clip.id,
    });
  };

  if (isHidden()) {
    return null;
  }

  return (
    <Button
      size={ButtonSize.Mini}
      shape={ButtonShape.Rounded}
      variant={ButtonVariant.Standard}
      onClick={handleClick}
      className='px-2 whitespace-nowrap'
    >
      Get Full Song
    </Button>
  );
});