import clsx from 'clsx';
import { useCallback } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import Button, {
  ButtonShape,
  ButtonSize,
  DEFAULT_BUTTON_AURA_IMAGE,
} from '@/components/button/Button';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import { useContextSelector } from '@/hooks/useContextSelector';
import { CreateIcon, RemixIcon } from '@/icons';
import { createTransactionLogger } from '@/logging/logWebUserEvent';

import CreateFormContext from '../v2/CreateFormContext';
import useCreateFormLogging from '../v2/useCreateFormLogging';

export const CreateButton = () => {
  const { session } = useStores();
  const generate = useContextSelector(CreateFormContext, (ctx) => ctx.generate);
  const model = useContextSelector(
    CreateFormContext,
    (ctx) => ctx.state.global.model
  );
  const isGenerating = useContextSelector(
    CreateFormContext,
    (ctx) => ctx.isGenerating
  );
  const canGenerate = useContextSelector(
    CreateFormContext,
    (ctx) => !ctx.createBlockingErrorMessage
  );
  const isRemix = useContextSelector(CreateFormContext, (ctx) => ctx.isRemix);

  const { logGenerateButtonClicked, logInsufficientCredits } =
    useCreateFormLogging();

  const isOutOfCreditsAndFreeClips = useCallback(() => {
    return (
      session.isOutOfCredits &&
      (model.includes('v4') ? session.isOutOfFreeV4Gens : true)
    );
  }, [session.isOutOfCredits, model, session.isOutOfFreeV4Gens]);

  return (
    <Button
      data-testid='create-button'
      aria-label={isRemix ? 'Remix the selected song' : 'Create a new song'}
      shape={ButtonShape.Pill}
      size={ButtonSize.Medium}
      onClick={async () => {
        if (!canGenerate) {
          return;
        }
        const transactionLogger = createTransactionLogger();
        logGenerateButtonClicked(transactionLogger);
        if (isOutOfCreditsAndFreeClips()) {
          logInsufficientCredits(transactionLogger);
        }
        await generate(transactionLogger);
      }}
      className={clsx(
        'w-full text-xl font-medium text-foreground-primary-on-dark',
        {
          'px-2': isOutOfCreditsAndFreeClips(),
        }
      )}
      disabled={!canGenerate || isGenerating}
      icon={isRemix ? RemixIcon : CreateIcon}
      iconClassName='w-6 h-6'
      style={
        {
          '--button-background-image': `url(${DEFAULT_BUTTON_AURA_IMAGE})`,
          backgroundImage: 'var(--button-background-image)',
          position: 'relative',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        } as React.CSSProperties
      }
    >
      {isRemix ? 'Remix' : 'Create'}
      {isGenerating ? (
        <>
          {' '}
          <SpinnerSVG />
        </>
      ) : null}
    </Button>
  );
};