import Button from '../../../button';
import { Status, Typography } from '../../../common';
import ProcessIndicator from '../../../processIndicator';
import Title from '../../../title';

export interface ProcessingStepProps {
  isComplete: boolean;
  isError: boolean;
  isSuccess: boolean;
  onClear: React.MouseEventHandler<HTMLButtonElement>;
  psButtonText: string;
  psProcessingText: string;
  psButtonDisabled: boolean;
}

export default function ProcessingStep({
  isComplete,
  isError,
  isSuccess,
  onClear,
  psButtonText,
  psProcessingText,
  psButtonDisabled,
}: ProcessingStepProps) {
  let processStatus = Status.PROCESSING;
  if (isError) {
    processStatus = Status.FAILED;
  }
  if (isSuccess) {
    processStatus = Status.SUCCEEDED;
  }

  return (
    <div className="droppable-processing-card droppable-card" aria-hidden={isComplete}>
      <div className="droppable-card-content">
        <ProcessIndicator status={processStatus} />
        <Title className="m-y-2" type={Typography.TITLE_BODY} aria-live="polite">
          {psProcessingText}
        </Title>
        {psButtonText && (
          <Button v2 disabled={psButtonDisabled} onClick={onClear}>
            {psButtonText}
          </Button>
        )}
      </div>
    </div>
  );
}