import PropTypes from 'prop-types';
import React from 'react';
import { observer } from 'mobx-react';
import { observable, action } from 'mobx';
import { Modal, Button } from 'react-bootstrap';
import { isEmpty } from 'lodash';
import { Icon } from 'shared';
import Course from '../../models/course';

@observer
class DeleteCourseModal extends React.Component {

  static propTypes = {
      course: PropTypes.instanceOf(Course).isRequired,
      history: PropTypes.shape({
          push: PropTypes.func,
      }).isRequired,
  }

  @observable showModal = false;

  @action.bound close() {
      this.showModal = false;
  }

  @action.bound open() {
      this.showModal = true;
  }

  @action.bound deleteCourse() {
      const { course, history } = this.props;
      const courseTeacherMembership = course.currentCourseTeacher;
      if (courseTeacherMembership.isTeacherOfCourse) {
          courseTeacherMembership.drop().then(history.push('/courses'));
      }
  }

  renderDeleteCourseButton() {
      return (
          <Button
              data-test-id="delete-course-btn"
              variant="link"
              onClick={this.open}>
              <Icon type="trash"/> Delete this course
          </Button>
      );
  }

  render() {
      const { course } = this.props;
      const hasAnyStudents = !isEmpty(course.roster.students.active);

      return (
      <>
        {this.renderDeleteCourseButton()}
        <Modal
            show={this.showModal}
            onHide={this.close}
            className="delete-course-modal">
            <Modal.Header closeButton>
                {`Delete ${course.name}?`}
            </Modal.Header>
            <Modal.Body>
                {hasAnyStudents && <strong><p className="text-danger" data-test-id="disabled-delete-course-message">This course has students enrolled in it.</p></strong>}
                <p>Are you sure you want to leave this course? The course will still be available to enrolled students and co-teachers.</p>
                <p>You can’t undo this action.</p>
            </Modal.Body>
            <div className="modal-footer">
                <Button variant="default" size="lg" onClick={this.deleteCourse}>
                  Yes, delete
                </Button>
                <Button variant="primary" size="lg" onClick={this.close}>
                  Cancel
                </Button>
            </div>
        </Modal>
      </>
      );
  }
}

export default DeleteCourseModal

@@ -1867,16 +1867,18 @@
      %3Cp%3E
+%7B%60
 Are you 
@@ -1898,13 +1898,46 @@
  to 
-leave
+$%7BhasAnyStudents ? 'leave' : 'delete'%7D
  thi
@@ -2018,16 +2018,18 @@
 eachers.
+%60%7D
 %3C/p%3E%0A   

update message