Contacts

class ContactsApp extends App{
	
	contacts = [{
		id: 1,
		firstName: `Alice`,
		lastName: `Aliceson`,
		email: `alice@aliceson.com`,
		phoneNumber: `123123123`,
	}, {
		id: 2,
		firstName: `Bob`,
		lastName: `Bobson`,
		email: `bob@bobson.com`,
		phoneNumber: `111222333`,
	}, ]
	
	deleteContactById(id){
		a.contacts.splice(
			a.contacts.findIndex(c => c.id == id),
			1,
		)
	}
	
	getNextContactId(){
		return (a.contacts.at(-1)?.id ?? 0) + 1
	}
	
	addContact(){
		a.contacts.push({
			id: a.getNextContactId(),
			firstName: ``,
			lastName: ``,
			email: ``,
			phoneNumber: ``,
		})
	}
	
	createStartPage(){
		return StartPage
	}
	
}

class StartPage extends Page{
	
	createGui(){
		
		const nextContactId = a.getNextContactId()
		
		return Rows.padding(5).children(
			Rows.size(1).children(
				a.contacts.map(
					c => Button.text(`${c.firstName} ${c.lastName}`).page(ViewContactPage.id(c.id)),
				)
			),
			Columns.children(
				Space,
				Button.text(`+`).onClick(a.addContact).page(EditContactPage.id(nextContactId)),
			),
		)
	}
	
}

class ViewContactPage extends Page{
	
	id = 1
	
	createGui(){
		
		const contact = a.contacts.find(c => c.id == p.id)
		
		return Rows.padding(5).children(
			Columns.children(
				Text.text(`First name:`),
				Box.width(1),
				Text.text(contact.firstName),
			),
			Columns.children(
				Text.text(`Last name:`),
				Box.width(1),
				Text.text(contact.lastName),
			),
			Columns.children(
				Text.text(`Email:`),
				Box.width(1),
				Text.text(contact.email),
			),
			Columns.children(
				Text.text(`Phone number:`),
				Box.width(1),
				Text.text(contact.phoneNumber),
			),
			Space,
			Columns.children(
				Button.text(`Back`).page(StartPage),
				Space,
				Button.text(`Delete`).page(DeleteContactPage.id(p.id)),
				Space,
				Button.text(`Edit`).page(EditContactPage.id(p.id)),
			),
		)
	}
	
}

class EditContactPage extends Page{
	
	id = 1
	
	createGui(){
		
		const contact = a.contacts.find(c => c.id == p.id)
		
		return Rows.padding(5).children(
			Columns.children(
				Text.text(`First name`),
				Box.width(1),
				EnterText.size(1).text(contact.firstName).store(contact, 'firstName'),
			),
			Columns.children(
				Text.text(`Last name`),
				Box.width(1),
				EnterText.size(1).text(contact.lastName).store(contact, 'lastName'),
			),
			Columns.children(
				Text.text(`Email`),
				Box.width(1),
				EnterText.size(1).text(contact.email).store(contact, 'email'),
			),
			Columns.children(
				Text.text(`Phone number`),
				Box.width(1),
				EnterText.size(1).text(contact.phoneNumber).store(contact, 'phoneNumber'),
			),
			Space,
			Button.text(`Save`).page(ViewContactPage.id(p.id)),
		)
	}
	
}

class DeleteContactPage extends Page{
	
	id = 1
	
	createGui(){
		
		const contact = a.contacts.find(c => c.id == p.id)
		
		return Rows.padding(5).children(
			Text.text(`Are you sure you want to delete the contact ${contact.firstName} ${contact.lastName}?`),
			Space,
			Columns.children(
				Button.text(`No`).page(ViewContactPage.id(p.id)),
				Space,
				Button.text(`Yes`).page(StartPage).onClick(p.deleteContact),
			),
		)
	}
	
	deleteContact(){
		a.deleteContactById(p.id)
	}
	
}