import clsx from 'clsx';

import { useStores } from '@/app/(root)/AppProviders';
import { isBlendedCreateExperimentEnabled } from '@/utils/session';

export const ModelDownsampleWarning = () => {
  const { genForm, clips, session } = useStores();
  const isCreateExperimentEnabled = isBlendedCreateExperimentEnabled(session);
  const continuedFromClip = genForm.continueClipId
    ? clips.clipById[genForm.continueClipId]
    : null;
  return (
    <>
      {continuedFromClip?.major_model_version === 'v4' &&
      !(genForm.mv.includes('v4') || genForm.mv.includes('auk')) ? (
        <span
          className={clsx('text-center text-accent-brand', {
            'py-4 text-base': !isCreateExperimentEnabled,
            'max-w-[500px] px-2 py-1 text-sm': isCreateExperimentEnabled,
          })}
        >
          <strong>Warning:</strong> The clip you are Extending was made with v4.
          Using a different model may affect sound quality.
        </span>
      ) : null}

      {!!continuedFromClip &&
      continuedFromClip?.major_model_version !== 'v4' &&
      continuedFromClip?.major_model_version !== 'v4.5' &&
      !continuedFromClip?.model_name.includes('auk') &&
      genForm.mv.includes('v4') &&
      continuedFromClip.metadata.type !== 'upload' ? (
        <span
          className={clsx('text-center text-accent-brand', {
            'py-4 text-base': !isCreateExperimentEnabled,
            'px-2 py-1 text-sm': isCreateExperimentEnabled,
          })}
        >
          <strong>Warning:</strong> The clip you are Extending was made with an
          earlier model version. For best results, Remaster the clip before
          Extending.
        </span>
      ) : null}
    </>
  );
};