// Define a Controller class
class Controller {
	// Initialize the controller
	init = () => {
		// Initialize the view
		app.view.init();
		// Add a click event listener to the title that calls the editTitle method
		app.view.element
			.querySelector("h1")
			.addEventListener("click", (e) => app.view.editTitle(e));
	}
	setTitle = (title) => {
		app.state.title = title;
		app.view.updateTitle();
	};
}

// Define a View class
class View {
	// Constructor for the View class
	constructor(tag, innerHTML, parentElement) {
		// Create a new HTML element with the given tag
		this.element = document.createElement(tag);
		// Set the inner HTML of the element to the given HTML
		this.element.innerHTML = innerHTML;
		// Append the new element to the given parent element
		parentElement.append(this.element);
	}
	init = () => {
		// Create a new View instance
		new View(
			"main",
			`
            <h1>${app.state.title}</h1>
            <h2>Welcome to the app.</h2>
    `,
			this.element
		);
	};
	// Update the title in the view
	updateTitle = () =>
		(app.view.element.querySelector("h1").innerText = app.state.title);

	// Make the title editable when it's clicked
	editTitle = (e) => {
		const title = e.target;
		title.contentEditable = true;
		title.focus();

		// Set the title when Enter is pressed
		title.addEventListener("keypress", (e) => {
			if (e.key === "Enter") {
				title.contentEditable = false;
				app.controller.setTitle(title.innerText);
			}
		});

		// Set the title when it loses focus
		title.addEventListener("blur", () => {
			title.contentEditable = false;
			app.controller.setTitle(title.innerText);
		});
	};
}

// Define a Model class
class Model {
	// Constructor for the Model class
	constructor() {
		// Initialize the state with a title and count
		this.state = {
			title: "Hello World!",
			count: 0
		};
		// Create a new View instance with a div element, no inner HTML, and append it to the body of the document
		this.view = new View("div", "", document.body);
		// Create a new Controller instance and pass the view instance to it
		this.controller = new Controller(this.view);
	}
}
// Create a new instance of the Model class and assign it to the constant "app"
const app = new Model();
// Call the init method on the controller property of the app instance
// This initializes the view and adds event listeners to the HTML elements
document.onload = app.controller.init();