// @flow

import type { Dispatch } from "../actions/types";
import type { State } from "../types";

import React, { Component } from "react";
import {
  Col,
  Form,
  FormGroup,
  Label,
  Input,
  Button,
  Progress
} from "reactstrap";
import RichTextEditor from "react-rte";
import { connect } from "react-redux";
import { updateNewLesson, saveNewLesson } from "../actions";

class EditLesson extends Component {
  props: {
    id: string,
    title: string,
    background: RichTextEditor,
    updateNewLesson: (title: string, background: RichTextEditor) => void,
    saveNewLesson: (title: string, background: string) => void
  };

  onTitleChange = event => {
    this.props.updateNewLesson(event.target.value, this.props.background);
  };

  onBackgroundChange = background => {
    this.props.updateNewLesson(this.props.title, background);
  };

  onSaveClick = (event: Event) => {
    event.preventDefault();
    this.props.saveNewLesson(
      this.props.title,
      this.props.background.toString("html")
    );
  };

  render() {
    if (this.props.id === null) {
      return (
        <Col sm="9" md="10">
          <h2 className="page-header">Edit Lesson</h2>

          <div>
            <Progress animated color="muted" value="100" />
          </div>
        </Col>
      );
    }
    return (
      <Col sm="9" md="10">
        <h2 className="page-header">Edit Lesson</h2>

        <div>
          <Form>
            <FormGroup>
              <Label for="inputLessonTitle">Title</Label>
              <Input
                type="text"
                id="inputLessonTitle"
                onChange={this.onTitleChange}
                value={this.props.title}
              />
            </FormGroup>
            <FormGroup>
              <Label for="inputBackground">Background</Label>
              <RichTextEditor
                value={this.props.background}
                onChange={this.onBackgroundChange}
              />
            </FormGroup>
            <Button color="success" onClick={this.onSaveClick}>
              Save Lesson
            </Button>
          </Form>
        </div>
      </Col>
    );
  }
}

const mapStateToProps = (state: State, ownProps) => {
  let id = ownProps.match.params.id;
  let lesson = null;
  for (let currentLesson of state.lessons.lessons) {
    if (currentLesson.id === id) {
      lesson = currentLesson;
      break;
    }
  }
  if (lesson === null) {
    console.error("Invalid lesson id: ", id);
    return {
      id: null,
      title: null,
      background: null
    };
  }
  return {
    id: lesson.id,
    title: lesson.title,
    background: RichTextEditor.createValueFromString(lesson.background, "html")
  };
};

const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    updateNewLesson: (title: string, background: RichTextEditor) => {
      dispatch(updateNewLesson(title, background));
    },
    saveNewLesson: (title: string, background: string) => {
      dispatch(saveNewLesson(title, background));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(EditLesson);

@@ -323,33 +323,13 @@
 rt %7B
- updateNewLesson,
  save
-New
 Less
@@ -357,58 +357,23 @@
 %22;%0A%0A
-class EditLesson extends Component %7B%0A  p
+type P
 rops
-:
+ =
  %7B%0A
-  
   id
@@ -380,26 +380,24 @@
 : string,%0A  
- 
- 
 title: strin
@@ -399,18 +399,16 @@
 string,%0A
-  
   backgr
@@ -429,18 +429,16 @@
 Editor,%0A
-  
   update
@@ -501,27 +501,22 @@
 %3E void,%0A
-  
   save
-New
 Lesson: 
@@ -563,115 +563,372 @@
 oid%0A
-  %7D;%0A%0A  onTitleChange = event =%3E %7B%0A    this.props.updateNewLesson(event.target.value, this.props.background
+%7D;%0A%0Aclass EditLesson extends Component %7B%0A  props: Props;%0A%0A  state: %7B%0A    title: string,%0A    background: RichTextEditor%0A  %7D;%0A%0A  constructor(props) %7B%0A    super(props);%0A    %0A    console.log(props);%0A%0A    this.state = %7B%0A      title: props.title,%0A      background: props.background%0A    %7D;%0A  %7D%0A%0A  onTitleChange = event =%3E %7B%0A    this.setState(%7B title: event.target.value %7D
 );%0A 
@@ -984,47 +984,18 @@
 his.
-props.updateNewLesson(this.props.title,
+setState(%7B
  bac
@@ -1001,16 +1001,18 @@
 ckground
+ %7D
 );%0A  %7D;%0A
@@ -1091,27 +1091,24 @@
 s.props.save
-New
 Lesson(%0A    
@@ -1116,24 +1116,45 @@
  this.props.
+id,%0A      this.state.
 title,%0A     
@@ -1155,29 +1155,29 @@
 %0A      this.
-props
+state
 .background.
@@ -1206,16 +1206,153 @@
 ;%0A  %7D;%0A%0A
+  onDeleteClick = (event: Event) =%3E %7B%0A    event.preventDefault();%0A    // this.props.deleteLesson(%0A    //   this.props.id%0A    // );%0A  %7D;%0A%0A
   render
@@ -1981,21 +1981,21 @@
 e=%7Bthis.
-props
+state
 .title%7D%0A
@@ -2180,21 +2180,21 @@
 e=%7Bthis.
-props
+state
 .backgro
@@ -2403,16 +2403,131 @@
 Button%3E%0A
+            %3CButton color=%22danger%22 onClick=%7Bthis.onDeleteClick%7D%3E%0A              Delete Lesson%0A            %3C/Button%3E%0A
         
@@ -3196,25 +3196,20 @@
 n %7B%0A    
-updateNew
+save
 Lesson: 
@@ -3201,37 +3201,34 @@
    saveLesson: (
-title
+id
 : string, backgr
@@ -3225,120 +3225,8 @@
 ng, 
-background: RichTextEditor) =%3E %7B%0A      dispatch(updateNewLesson(title, background));%0A    %7D,%0A    saveNewLesson: (
 titl
@@ -3284,18 +3284,19 @@
 save
-New
 Lesson(
+id, 
 titl

edit lesson