// renders the preview of an attachment inside a modal
// -- props --
// url: Used for getting the attachments of a loan application
// sort_value: To preserve the sort type from the attachments table
// attachment: The attachment to be previewed
// attachments: The array of attachments to be displayed in the preview sidebar

const propTypes = {
  attachment: React.PropTypes.object,
  attachments: React.PropTypes.array,
  document: React.PropTypes.object,
  loan_application: React.PropTypes.object.isRequired,
  loan_application: React.PropTypes.object.isRequired,
};

const defaultProps = {
  url: '',
  attachmentUrl: '',
  attachments: [],
  sort_value: 'date_descending',
  document: {},
  attachment: {},
};

class RequirementsHubAttachmentModal extends React.Component {
  constructor(props) {
    super(props);

    let { type, kind, number, expiration_date } = this.props.document;

    this.state = {
      rotation: 0,
      zoom: false,
      loading: false,
      processing: false,
      attachmentUrl: this.props.attachment.url,
      sort_value: this.props.sort_value,
      document: {
        type: type,
        kind: kind,
        number: number,
        expiration_date: expiration_date,
      },
      attachment: this.props.attachment,
      attachments: this.props.attachments,
      asCollection: false,
      success: '',
      status: 'initialized',
    };

    this.zoom = this.zoom.bind(this);
    this.rotate = this.rotate.bind(this);
    this.onSortChange = this.onSortChange.bind(this);
    this.fetchSuccess = this.fetchSuccess.bind(this);
    this.saveRotation = this.saveRotation.bind(this);
    this.rotationSuccess = this.rotationSuccess.bind(this);
    this.updateAttachment = this.updateAttachment.bind(this);
    this.handleDocumentSubmit = this.handleDocumentSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.buildFilePayload = this.buildFilePayload.bind(this);
    this.uploadAttachmentSuccess = this.uploadAttachmentSuccess.bind(this);
    this.setAttributesAfterUpload = this.setAttributesAfterUpload.bind(this);
    this.handleUploadAttachment = this.handleUploadAttachment.bind(this);
  }


  // when the component updates, fetch the attachment URL if the attachmentURL
  // is ''. The attachmentURL is set back to '' in updateAttachment() which is
  // called when an attachment in the sidebar is clicked
  componentDidUpdate(previousProps, previousState) {
    if (this.state.attachmentUrl == '') {
    }
  }

  onSortChange(e) {
    e.preventDefault();
    this.setState({
      loading: true,
      sort_value: e.target.value,
    });

    let loan_application_id = this.state.attachment.loan_application_id;
    $.ajax({
      url: Routing.api_v1_loan_application_attachments(loan_application_id),
      method: 'GET',
      data: { sort: e.target.value },
      success: this.fetchSuccess,
    });
  }

  fetchSuccess(attachments) {
    this.setState({
      loading: false,
      attachments: attachments,
    });
  }

  rotationSuccess(response) {
    this.setState({
      processing: false,
      attachmentUrl: '',
      attachment: response.attachment,
    })
  }

  saveRotation() {
    this.setState({ processing: true })
    $.ajax({
      type: 'PUT',
      url: Routing.api_v1_loan_application_attachment(
        this.state.attachment.loan_application_id,
        this.state.attachment.id,
      ),
      data: {
        attachment: { rotation: this.state.rotation }
      },
      success: this.rotationSuccess
    })
  }

  rotate() {
    let rotation = (this.state.rotation + 90) % 360;
    this.setState({rotation});
  }

  zoom() {
    let zoom = !this.state.zoom
    this.setState({zoom})
  }

  updateAttachment(attachment) {
    this.setState({ attachment, attachmentUrl: '', rotation: 0, zoom: false })
  }

  get height() {
    if (this.state.rotation % 180 == 0) {
      return 'auto'
    }

    if (this.state.zoom == false) {
      return this.refs.scrollarea.clientWidth
    }
  }

  get width() {
    if (this.height != 'auto') {
      return 'auto'
    }
    return this.state.zoom ? "auto" : "100%"
  }

  get imageStyle() {
    return {
      width: this.width,
      height: this.height,
      transformOrigin: 'top left',
      transform: this.transform,
    }
  }

  get transform() {
    if (this.state.rotation == 90) {
      return `rotate(${this.state.rotation}deg) translateY(-100%)`
    }
    if (this.state.rotation == 180) {
      return `rotate(${this.state.rotation}deg) translate(-100%, -100%)`
    }
    if (this.state.rotation == 270) {
      return `rotate(${this.state.rotation}deg) translateX(-100%)`
    }
  }

  get sortOptions() {
    return SelectOptions.attachment_sort_types;
  }

  get sortClassName() {
    return classNames(
      'display-flex', 'justifyContent-flex-end',
      'marginLeft-m', 'marginRight-m', 'paddingTop-s', 'paddingBottom-s',
      'borderBottomWidth-1', 'borderStyle-solid', 'borderBottomColor-grey-l'
    )
  }

  get sidePanelClassName() {
    return classNames(
      'float-left', 'width-30p', 'height-100p', 'padding-m', 'borderLeftWidth-1', 'borderBottomWidth-1', 'borderStyle-solid', 'borderBottomColor-grey-l'
    )
  }

  get rotationButtonClassName() {
    return classNames(
      "btn",
      "btn-blue",
      "btn-s cursor-pointer",
      {
        "btn-outlined": !this.state.processing
      },
      {
        "btn--loading": this.state.processing
      }
    )
  }

  renderSaveRotationButton() {
    if (this.state.rotation == 0) return;

    return (
      <div>
        <a
          className={this.rotationButtonClassName}
          onClick={this.saveRotation}
        >
          Save Rotation
        </a>
      </div>
    );
  }

  // returns the content for the preview pane
  renderContent() {
    if ( !this.state.attachment.url && !this.state.attachmentUrl ) {
      return <h1>Please Upload Attachment</h1>
    } else if ( !this.state.attachmentUrl ) {
      return <div className="loading marginTop-l" />
    }

    if (this.state.attachment.mime_type === 'image') {
      // return an image if the attachment is an image
      return (
        <div>
          <div className="attachment-actions">
            {this.renderSaveRotationButton()}
            <div
              onClick={this.rotate}
              className="attachment-action attachment-action-rotate"
            />
            <div
              onClick={this.zoom}
              className="attachment-action attachment-action-zoom"
            />
          </div>
          <img
            ref="image"
            style={this.imageStyle}
            className="preventTextSelect"
            src={this.state.attachmentUrl}
          />
        </div>
      )
    } else {
      // otherwise return an iframe
      return (
        <iframe
          className="height-100p width-100p"
          src={this.state.attachmentUrl}
        />
      );
    }
  }

  handleChange(event) {
   let newValues = { ...this.state }
   newValues.document[event.target.name] = event.target.value
   this.setState(newValues)
  }

  // setAttributesAfterUpload(response) {
  //   let documentValues = this.state.document
  // }

  handleUploadSuccess() {
    $.ajax({
      type: 'GET',
      url: Routing.api_v1_lead_requirements_hub_index(this.props.lead.id),
      success: this.setAttributesAfterUpload
    });
  }

  buildFilePayload() {
    let formData = new FormData();

    formData.append('documents[]type', this.state.document.type)
    formData.append('documents[]kind', this.state.document.kind)
    formData.append('documents[]number', this.state.document.number)
    formData.append('documents[]status', 'submitted')
    formData.append('documents[]source', 'fcc')
    formData.append(
      'documents[]expiration_date',
      this.state.document.expiration_date)
    formData.append(
      'documents[]attachment_attributes[attachment_file]',
      this.refs.upload_attachment.files[0]
    )
    formData.append(
      'documents[]attachment_attributes[loan_application_id]',
      this.props.loan_application.id
    )
    return formData;
  }

  handleDocumentSubmit(event) {
    event.preventDefault();
    debugger

    $.ajax({
      type: 'POST',
      url: Routing.import_api_v1_lead_documents(this.props.lead.id),
      data: this.buildFilePayload(),
      contentType: false,
      processData: false,
      success: this.handleUploadSuccess,
      error: (errors) => this.setState({ errors: errors.responseJSON.errors })
    });
  }

  renderDocumentOptions(document) {
    return (
      <form onSubmit={this.handleDocumentSubmit}>
        <div className="fontColor-green">{this.state.success}</div>
        <div className="fontColor-red">{this.state.errors}</div>
        <input type="submit" className="btn btn-green btn-small fontSize-xxxxs" value="Save" />
        <Select
          name="type"
          ref="type"
          options={SelectOptions.document_type}
          value={this.state.document.type}
          onChange={this.handleChange}
          placeholder='Choose Document Kind'
        />
        <hr/>
        <Select
          name="kind"
          ref="kind"
          options={SelectOptions.document_kind}
          value={this.state.document.kind}
          onChange={this.handleChange}
          placeholder='Select Document Type'
        />
        <TextInput
          type="text"
          name="number"
          ref="number"
          value={this.state.document.number}
          onChange={this.handleChange}
        />
        <DateSelect
          name="expiration_date"
          ref="expiration_date"
          value={this.state.document.expiration_date}
          onChange={this.handleChange}
        />
      </form>
    )
  }

  uploadAttachmentSuccess(attachments) {
    const length = attachments.attachments.length;
    const base = length > 1 ? `${length} ` : "Attachment";
    Alert(`${base} uploaded successfully!`);
    this.setState({
      attachmentUrl: attachments.attachments[0].expiring_url,
      attachment: attachments.attachments[0],
      status: 'initialized'
    });
  }

  buildAttachmentPayload() {
    let formData = new FormData();
    const files = this.refs.upload_attachment.files;
    for (var i = 0; i < files.length; i++) {
      formData.append('attachment_files[]', files[i], files[i].name);
    }
    return formData;
  }

  handleUploadAttachment(event) {
    event.preventDefault();
    this.setState({ status: "processing" })

    $.ajax({
      url: Routes.api_loan_application_attachments_path(
        this.props.loan_application.id
      ),
      method: 'POST',
      data: this.buildAttachmentPayload(),
      contentType: false,
      processData: false,
      success: this.uploadAttachmentSuccess,
      error: this.uploadError
    })
  }

  buttonClassName() {
    return classNames(
      "backgroundColor-green",
      {
        "btn--loading": this.state.status === "processing"
      }
    )

  }
  renderUploadAttachmentButton() {
    return (
      <FileInputButton
        ref="upload_attachment"
        key={this.state.input_key}
        buttonText="Upload Document"
        onChange={this.handleAttachmentUpload}
        name="attachment[attachment_file]"
        buttonClassName={this.buttonClassName()}
      />
    );
  }

  renderAttachmentForm() {
    return (
      <section className="maginTop-xl">
        <h5>Attach Document To</h5>
        {this.renderDocumentOptions()}
        {this.renderUploadAttachmentButton()}
      </section>
    )
  }

  renderAttachments() {
    if (this.state.loading) {
      return <div className="loading paddingTop-xl" />
    } else {
      return this.state.attachments.map(function(attachment, i) {
        return (
          <RequirementsHubAttachment
            key={i}
            onClick={this.updateAttachment}
            className="attachment-s marginBottom-s"
            {...attachment}
          />
        )
      }.bind(this))
    }
  }

  renderSortAttachments() {
    return (
      <div className='display-flex alignItems-center'>
        <div>
          <label className='marginRight-s marginBottom-0'>Sort:</label>
        </div>
        <div>
          <Select
            className='select-simple'
            options={this.sortOptions}
            value={this.state.sort_value}
            onChange={this.onSortChange}
          />
        </div>
      </div>
    );
  }

  renderAttachmentsContainer() {
    return (
      <div className='height-80p overflowY-scroll'>
        <div className={this.sortClassName}>
          {this.renderSortAttachments()}
        </div>
        <div className="padding-m paddingTop-s">
          {this.renderAttachments()}
        </div>
      </div>
    );
  }

  renderSidePanel() {
    return (
      <div className={this.sidePanelClassName}>
        <h4>Customer Documents</h4>
        {this.state.asCollection ? this.renderAttachmentsContainer() :
        this.renderAttachmentForm(this.state.document)}
      </div>
    );
  }

  render() {
    return (
      <div className="clearfix height-100p">
        <div
          ref='viewport'
          className="float-left width-70p height-100p position-relative"
        >
          <div
            ref="scrollarea"
            className="overflow-scroll width-100p height-100p"
          >
            {this.renderContent()}
          </div>
        </div>
        {this.renderSidePanel()}
      </div>
    );
  }
}

RequirementsHubAttachmentModal.propTypes = propTypes;

RequirementsHubAttachmentModal.defaultProps = defaultProps;

RequirementsHubAttachmentModal = asModal(RequirementsHubAttachmentModal, {className: 'modal-full-screen'})