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

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[];
  errorIconLabel?: 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);
    }
  };

  onKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      this.uploadInputRef.current?.click();
    }
  };

  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} iconLabel={null} />
        </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 {
      errorMessage,
      isComplete,
      errorIconLabel,
      usAccept,
      usButtonText,
      usDisabled,
      usLabel,
      usPlaceholder,
    } = 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}
            onKeyDown={this.onKeyDown}
          >
            {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">
                <InlinePrompt
                  sentiment={Sentiment.NEGATIVE}
                  mediaLabel={errorIconLabel}
                  width="full"
                >
                  {errorMessage}
                </InlinePrompt>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}