import { Upload as UploadIcon } from '@transferwise/icons';
import { createRef, PureComponent } from 'react';
import StatusIcon from '../../../statusIcon';
import { Sentiment, Size } from '../../../common';
import InlineAlert from '../../../inlineAlert';

export interface UploadImageStepProps {
  fileDropped: (file: File) => void;
  isComplete: boolean;
  usAccept: string;
  usButtonText: string;
  usDisabled: boolean;
  usHelpImage: React.ReactNode;
  usLabel: string;
  usPlaceholder: string;
  errorMessage?: string | string[];
}

export default class UploadImageStep extends PureComponent<UploadImageStepProps> {
  uploadInputRef = createRef<HTMLInputElement>();

  onManualUpload = () => {
    const { fileDropped } = this.props;
    const file = this.uploadInputRef.current?.files?.[0];
    if (file != null) {
      fileDropped(file);
    }
  };

  getImage = () => {
    const { usHelpImage, usLabel } = this.props;
    const { errorMessage } = this.props;

    if (errorMessage) {
      return (
        <div className="d-flex flex-column align-items-center">
          <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />
        </div>
      );
    }

    if (!usHelpImage) {
      return (
        <div className="circle circle-sm circle-inverse p-t-1">
          <UploadIcon size={24} />
        </div>
      );
    }

    if (typeof usHelpImage === 'string') {
      return <img src={usHelpImage} alt={usLabel} className="thumbnail text-xs-center" />;
    }

    return usHelpImage;
  };

  render() {
    const { isComplete, usAccept, usButtonText, usDisabled, usLabel, usPlaceholder, errorMessage } =
      this.props;

    return (
      <div className="droppable-default-card" aria-hidden={isComplete}>
        <div className="droppable-card-content">
          <div className="m-b-3">{this.getImage()}</div>
          {usLabel && <h4 className="np-text-title-body m-b-1">{usLabel}</h4>}
          {usPlaceholder && <p className="np-text-body-large m-b-3">{String(usPlaceholder)}</p>}
          <label
            className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}
            role="button"
            aria-disabled={usDisabled}
            tabIndex={0}
          >
            {usButtonText ? (
              <span>{usButtonText}</span>
            ) : (
              <UploadIcon size={24} className="m-r-0" />
            )}
            <input
              ref={this.uploadInputRef}
              type="file"
              accept={usAccept === '*' ? undefined : usAccept}
              className="tw-droppable-input hidden"
              disabled={usDisabled}
              name="file-upload"
              onChange={() => this.onManualUpload()}
            />
          </label>
          {errorMessage && (
            <div className="upload-error-message">
              <div className="m-t-3 has-error">
                <InlineAlert type={Sentiment.NEGATIVE}>{errorMessage}</InlineAlert>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}
