import React, { Component } from "react";
import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import LoaderButton from "../components/LoaderButton";
import { invokeApig } from "../libs/awsLib";
import config from "../config";
import "./Notes.css";

export default class Notes extends Component {
  constructor(props) {
    super(props);

    this.file = null;

    this.state = {
      isLoading: null,
      isDeleting: null,
      note: null,
      content: ""
    };
  }

  async componentDidMount() {
    try {
      const results = await this.getNote();
      this.setState({
        note: results,
        content: results.content
      });
    } catch (e) {
      alert(e);
    }
  }

  getNote() {
    return invokeApig({ path: `/notes/${this.props.match.params.id}` });
  }

  validateForm() {
    return this.state.content.length > 0;
  }

  formatFilename(str) {
    return str.length < 50
      ? str
      : str.substr(0, 20) + "..." + str.substr(str.length - 20, str.length);
  }

  handleChange = event => {
    this.setState({
      [event.target.id]: event.target.value
    });
  }

  handleFileChange = event => {
    this.file = event.target.files[0];
  }

  handleSubmit = async event => {
    event.preventDefault();

    if (this.file && this.file.size > config.MAX_ATTACHMENT_SIZE) {
      alert("Please pick a file smaller than 5MB");
      return;
    }

    this.setState({ isLoading: true });
  }

  handleDelete = async event => {
    event.preventDefault();

    const confirmed = window.confirm(
      "Are you sure you want to delete this note?"
    );

    if (!confirmed) {
      return;
    }

    this.setState({ isDeleting: true });
  }

  render() {
    return (
      <div className="Notes">
        {this.state.note &&
          <form onSubmit={this.handleSubmit}>
            <FormGroup controlId="content">
              <FormControl
                onChange={this.handleChange}
                value={this.state.content}
                componentClass="textarea"
              />
            </FormGroup>
            {this.state.note.attachment &&
              <FormGroup>
                <ControlLabel>Attachment</ControlLabel>
                <FormControl.Static>
                  <a
                    target="_blank"
                    rel="noopener noreferrer"
                    href={this.state.note.attachment}
                  >
                    {this.formatFilename(this.state.note.attachment)}
                  </a>
                </FormControl.Static>
              </FormGroup>}
            <FormGroup controlId="file">
              {!this.state.note.attachment &&
                <ControlLabel>Attachment</ControlLabel>}
              <FormControl onChange={this.handleFileChange} type="file" />
            </FormGroup>
            <LoaderButton
              block
              bsStyle="primary"
              bsSize="large"
              disabled={!this.validateForm()}
              type="submit"
              isLoading={this.state.isLoading}
              text="Save"
              loadingText="Saving…"
            />
            <LoaderButton
              block
              bsStyle="danger"
              bsSize="large"
              isLoading={this.state.isDeleting}
              onClick={this.handleDelete}
              text="Delete"
              loadingText="Deleting…"
            />
          </form>}
      </div>
    );
  }
}

@@ -181,16 +181,26 @@
 vokeApig
+, s3Upload
  %7D from 
@@ -1195,24 +1195,170 @@
 es%5B0%5D;%0A  %7D%0A%0A
+  saveNote(note) %7B%0A    return invokeApig(%7B%0A      path: %60/notes/$%7Bthis.props.match.params.id%7D%60,%0A      method: %22PUT%22,%0A      body: note%0A    %7D);%0A  %7D%0A%0A
   handleSubm
@@ -1371,32 +1371,59 @@
 sync event =%3E %7B%0A
+    let uploadedFilename;%0A%0A
     event.preven
@@ -1607,32 +1607,440 @@
 oading: true %7D);
+%0A%0A    try %7B%0A      if (this.file) %7B%0A        uploadedFilename = (await s3Upload(this.file))%0A          .Location;%0A      %7D%0A%0A      await this.saveNote(%7B%0A        ...this.state.note,%0A        content: this.state.content,%0A        attachment: uploadedFilename %7C%7C this.state.note.attachment%0A      %7D);%0A      this.props.history.push(%22/%22);%0A    %7D catch (e) %7B%0A      alert(e);%0A      this.setState(%7B isLoading: false %7D);%0A    %7D
 %0A  %7D%0A%0A  handleDe

save a note