class Classroom {
  constructor(id, subject = 'Homeroom') {
    this.id = id;
    this.persons = [];
    this.subject = subject;
  }
}

class Person {
  constructor(id, firstN = 'John', lastN = 'Doe') {
    this.id = id;
    this.firstName = firstN;
    this.lastName = lastN;
    this.subjects = [];
    this.classrooms = [];
  }
}

const subjects = [
  "English",
  "Math",
  "Computer Science",
  "Business",
  "Finance",
  "Home Economics"
];

import classroomModel from "../models/classroom";
class ClassroomController {
  constructor() {
    this.lastID = 0;
    this.classrooms = [];
    this.selectedClass = null;
  }
  selectClassroom(classroomID) {
    this.selectedClass = this.classrooms
    .filter(c => c.id === parseInt(classroomID, 10))[0];
  }
  addClassroom(subject) {
    this.classrooms.push(
      new classroomModel(this.lastID, subject)
      );
    this.lastID += 1;
  }
  removeClassroom(classroomID) {
    this.classrooms = this.classrooms
      .filter(c => c.id !== parseInt(classroomID, 10));
  }
  setSubject(subject, classroomID) {
    const classroom = this.classrooms
      .filter(c => c.id === parseInt(classroomID, 10))[0];
    classroom.subject = subject;
  }
  addPerson(person, classroom) {
    // const classroom = this.classrooms
    // .filter(c => c.id === parseInt(classroomID, 10))[0];
    if (!person) return;
    classroom.addPerson(person);
  }
  removePerson(person, classroomID) {
    const classroom = this.classrooms
    .filter(c => c.id === parseInt(classroomID, 10))[0];
    classroom.removePerson(person);
  }
}

import classroomController from "../controllers/classroom";
import subjects from "../models/subjects";
class ClassroomView {
  constructor(appDiv) {
    this.classroomController = new classroomController();
    this.classroomSectionDiv = document.createElement('div');
    this.classroomsDiv = document.createElement('div');
    this.addclassBtn = document.createElement('button');
    this.selectSubjectInput = document.createElement('select');
    this.classroomSectionDiv.classList.add('classroom-section');
    this.classroomsDiv.classList.add('classroom-container');
    this.selectSubjectInput.innerHTML = subjects.map((option, index) => (
      `<option key=${index} value=${option}>${option.toUpperCase()}</option>`
    ));
    this.addclassBtn.textContent = 'New Class';
    this.addclassBtn.addEventListener('click', () => this.addClassroom());
    this.classroomSectionDiv.append(
      this.classroomsDiv, this.selectSubjectInput,
      this.addclassBtn,
      );
    appDiv.appendChild(this.classroomSectionDiv);
  }
  updateView() {
    const { classroomController, classroomsDiv } = this;
    const allClassrooms = classroomController.classrooms.map(
      c => {
        const removeBtn = document.createElement('button');
        const classDiv = document.createElement('div');
        classDiv.classList.add('classroom');
        if (classroomController.selectedClass === c) {
          classDiv.classList.add('selected');
        }
        classDiv.addEventListener('click', () => this.selectClassroom(classDiv.getAttribute('data-classroom-id')));
        classDiv.setAttribute('data-classroom-id', c.id);
        removeBtn.addEventListener('click', () => this.removeClassroom(removeBtn.getAttribute('data-classroom-id')));
        removeBtn.setAttribute('data-classroom-id', c.id);
        removeBtn.classList.add('remove-btn');
        removeBtn.textContent= 'remove';
        const allPersons = c.persons.map(p => (
          `<div class="person-inline">
            <span class="fname">${p.firstName}</span>
            <span class="lname">${p.lastName}</span>
            <span class="${p.occupation}">${p.occupation}</span>
          </div>`
        ));
        classDiv.innerHTML = `<div class="m-b">
            <span class="id">${c.id}</span>
            <span class="subject">${c.subject}</span></div>
            <div class="all-persons">${allPersons.join('')}</div>`;
        classDiv.appendChild(removeBtn);
        return classDiv;
      }
    );
    classroomsDiv.innerHTML='';
    allClassrooms.map(div => classroomsDiv.append(div));
  }
  selectClassroom(classroomID) {
    const { classroomController } = this;
    classroomController.selectClassroom(classroomID);
    this.updateView();
  }
  addClassroom() {
    const {
      classroomController,
      selectSubjectInput,
    } = this;
    const subjectChosen = selectSubjectInput.value;
    classroomController.addClassroom(subjectChosen);
    this.updateView();
  }
  removeClassroom(classroomID) {
    const { classroomController } = this;
    classroomController.removeClassroom(classroomID);
    this.updateView();
  }
  addPerson(person, classroomID) {
    const { classroomController } = this;
    classroomController.addPerson(person, classroomID);
    this.updateView();
  }
}

import classroomView from './classroom';
import personView from './person';
class AppView {
  constructor(appDiv) {
    this.classroomView = new classroomView(appDiv);
    this.personView = new personView(appDiv);
    this.addPersonToClassBtn = document.createElement('button');
    this.addPersonToClassBtn.textContent = 'Add selected Person to Selected Class';
    this.addPersonToClassBtn.addEventListener('click', () => this.addPersonToClass());
    appDiv.appendChild(this.addPersonToClassBtn);
  }
  addPersonToClass() {
    const { classroomView, personView } = this;
    const { classroomController } = classroomView;
    const { personController } = personView;
    const selectedClassroom = classroomController.selectedClass;
    const selectedPerson = personController.selectedPerson;
    classroomView.addPerson(selectedPerson, selectedClassroom);
    personView.updateView();
  }
}