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

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import SongModalContext from '@/hooks/useSongModal';

export const CancelButton = ({ onCancel }: { onCancel?: () => void }) => {
  const { navigateTo } = useContext(SongModalContext);
  const handleCancel = () => {
    if (onCancel) {
      onCancel();
    } else {
      navigateTo('main');
    }
  };

  return (
    <Button size={ButtonSize.Small} onClick={handleCancel}>
      Cancel
    </Button>
  );
};

export const SaveButton = ({
  onSave,
  isSaving,
  disabled,
  variant = ButtonVariant.Primary,
  isSubmittingToContest,
}: {
  onSave: () => void;
  isSaving: boolean;
  disabled: boolean;
  variant?: ButtonVariant;
  isSubmittingToContest: boolean;
}) => {
  return (
    <Button
      variant={variant}
      size={ButtonSize.Small}
      shape={ButtonShape.Rounded}
      onClick={onSave}
      icon={
        isSaving && <SpinnerSVG className='text-foreground-primary-on-dark' />
      }
      disabled={disabled}
      className={clsx({
        'px-10': variant === ButtonVariant.Primary && !isSubmittingToContest,
      })}
    >
      {isSubmittingToContest ? 'Save & Submit Remix' : 'Save'}
    </Button>
  );
};

export const PublishButton = ({
  onPublish,
  isPublishing,
  disabled,
  isSubmittingToContest,
}: {
  onPublish: () => void;
  isPublishing: boolean;
  disabled?: boolean;
  isSubmittingToContest: boolean;
}) => {
  return (
    <Button
      variant={ButtonVariant.Primary}
      size={ButtonSize.Small}
      onClick={onPublish}
      icon={isPublishing && <SpinnerSVG className='text-current' />}
      disabled={disabled}
      className={clsx({
        'px-16': !isSubmittingToContest,
        'px-3': isSubmittingToContest,
      })}
    >
      {isSubmittingToContest ? 'Publish & Submit Remix' : 'Publish'}
    </Button>
  );
};