const todos = [
	{
		text: "Groceries",
		sublist: [
			"3 Tomatoes",
			"1 bunch of cherries",
			"6 onions",
			"3 heads of garlic",
			"1 bag spring mix"
		]
	},
	{ text: "Cancel gym membership", sublist: [] },
	{ text: "Clean gutters", sublist: [] },
	{ text: "Take package to the post office", sublist: [] },
	{ text: "Call Avery about Ali's party (afternoon)", sublist: [] },
	{ text: "Sort recycling & put out trash", sublist: [] }
];

// https://www.color-hex.com/color-palette/29241
const colors = ['#ff7eb9', '#ff65a3', '#7afcff', '#feff9c', '#fff740'];

const randomAngle = () => Math.random() < 0.5 ? Math.random() : Math.random() * -1;

const randomUUID = () => ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
  (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
);

const randomColor = () => colors[Math.floor(Math.random() * colors.length)];

const nextColor = (color) => {
	const index = colors.indexOf(color);
	return colors[(index + 1) % colors.length];
};
	
const adaptTextareaHeight = (el) => {
	el.style.height = 0;
	el.style.height = `${el.scrollHeight}px`;
}

const TodoList = ({ notes }) => {
	const [items, setItems] = React.useState(notes.map(note => ({
		...note,
		id: randomUUID(),
		angle: randomAngle(),
		bgColor: randomColor(),
	})));
	
	const adaptTextareas = () => {
		items.forEach(item => {
			const el = document.getElementById(item.id);
			if (el) adaptTextareaHeight(el);
		});
	};
	
	React.useEffect(() => {
		adaptTextareas();
	}, []);
	
	const addItem = () => {
		const newItem = {
			id: randomUUID(),
			text: "...",
			sublist: [],
			angle: randomAngle(),
			bgColor: randomColor(),
		};
		setItems(oldItems => [...oldItems, newItem]);
	};
	
	const removeItem = (id) => {
		const index = items.findIndex(item => item.id === id);
		const updatedItems = [...items];
		updatedItems.splice(index, 1);
		setItems(updatedItems);
		setTimeout(() => adaptTextareas());
	};
	
	const handleTextChange = (ev, id) => {
		const index = items.findIndex(item => item.id === id);
		const updatedItems = [...items];
		updatedItems[index].text = ev.target.value;
		setItems(updatedItems);
		adaptTextareaHeight(ev.target);
	};
	
	const addSubItem = (id) => {
		const index = items.findIndex(item => item.id === id);
		const updatedItems = [...items];
		const text = prompt("Input the subitem text", "");
		if (text) {
			updatedItems[index].sublist.push(text);
			setItems(updatedItems);
		}
	};
	
	const changeColor = (id) => {
		const index = items.findIndex(item => item.id === id);
		const updatedItems = [...items];
		const updatedColor = nextColor(updatedItems[index].bgColor);
		updatedItems[index].bgColor = updatedColor;
		setItems(updatedItems);
	};
	
	return (
		<section className="container">
			<header className="header">
				<h1 className="title">Todo Board</h1>
				<button className="button-add" onClick={addItem}>
					Add Note
				</button>
			</header>
			<ul className="note-list">
				{items.map(note =>
					(
						<li
							className="note-list-item"
							style={{
								transform: `rotate(${note.angle}deg)`,
								background: note.bgColor
							}}
						>
							<button
								className="button-hover button-remove"
								onClick={() => removeItem(note.id)}
							>
								<span>✖</span>
							</button>
							<article className="note-content">
								<textarea
									id={note.id}
									className="note-textarea"
									value={note.text}
									onChange={e => handleTextChange(e, note.id)}
								/>
								<ul className="note-sublist">
									{note.sublist.map(item => (
										<li className="note-sublist-item">
											<input type="checkbox" id={item} name={item} value={item} />
											<label for={item}>{item}</label>
										</li>
									))}
								</ul>
								<button
									className="button-hover button-note-action button-add-subitem"
									onClick={() => addSubItem(note.id)}
								>
									Add subitem
								</button>
								<button
									className="button-hover button-note-action button-color"
									onClick={() => changeColor(note.id)}
								>
									Color
								</button>
							</article>
						</li>
					)
				)}
			</ul>
		</section>
	);
};

ReactDOM.render(<TodoList notes={todos} />,
document.getElementById("root"))