const orgChart = {
  employees: [],
  addNewEmployee() {
    // 提供使用者要互動的視圖
    const employeeDetail = this.getEmployeeDetail();
    // 當員工詳細資料完成後，調解者決定接下來要發生的事
    employeeDetail.on("complete", (employee) => {
      const managerSelector = this.selectManager(employee);
      managerSelector.on("save", (employee) => {
        // 設定具有附加事件的附加物件
        // 調解者使用這些事件執行附加操作
        employee.save();
        this.employees.push(employee);
        console.log("Employee saved:", employee);
      });
    });
  },

  getEmployeeDetail() {
    const detailContainer = document.createElement("div");
    const nameInput = document.createElement("input");
    nameInput.placeholder = "員工姓名";
    detailContainer.appendChild(nameInput);
    const roleInput = document.createElement("input");
    roleInput.placeholder = "員工職稱";
    detailContainer.appendChild(roleInput);
    const submitBtn = document.createElement("button");
    submitBtn.textContent = "提交";
    detailContainer.appendChild(submitBtn);

    const eventHandlers = {};

    submitBtn.addEventListener("click", () => {
      const employee = new Employee(nameInput.value, roleInput.value);
      if (eventHandlers["complete"]) {
        eventHandlers["complete"](employee);
      }
    });

    document.getElementById("app").appendChild(detailContainer);

    return {
      on(event, callback) {
        eventHandlers[event] = callback;
      }
    };
  },

  selectManager(employee) {
    const managerContainer = document.createElement("div");
    const managerInput = document.createElement("input");
    managerInput.placeholder = "管理者姓名";
    managerContainer.appendChild(managerInput);
    const saveBtn = document.createElement("button");
    saveBtn.textContent = "儲存";
    managerContainer.appendChild(saveBtn);

    const eventHandlers = {};

    saveBtn.addEventListener("click", () => {
      employee.manager = managerInput.value;
      if (eventHandlers["save"]) {
        eventHandlers["save"](employee);
      }
    });

    document.getElementById("app").appendChild(managerContainer);

    return {
      on(event, callback) {
        eventHandlers[event] = callback;
      }
    };
  }
};

class Employee {
  constructor(name, role) {
    this.name = name;
    this.role = role;
    this.manager = null;
  }

  save() {
    alert(
      `${this.name} (${this.role}) saved with manager ${this.manager}`
    );
  }
}

document.getElementById("addEmployee").addEventListener("click", () => {
  orgChart.addNewEmployee();
});