import {useLayoutEffect, useRef, useState} from 'react';

import './content.css';

import Entry from '../../../../components/entry';

export default function Content({ title, setTitle, items, setItems }) {
	const [focused, setFocused] = useState(null);

	const children = items.map((item, i) => {
		return <Entry
			item={item}
			isFocused={i === focused}
			onSelect={delta => setFocused(i + delta)}
			onRemove={refocus => setItems(a => {
				if (refocus) {
					setFocused(i-1);
				}
				return [...a.slice(0, i), ...a.slice(i + 1)]
			})}
			onEnter={type => setItems(a => {
				setFocused(i+1);
				return a.toSpliced(i+1, 0, { type, text: '' });
			})}
		/>;
	});

	return <div className="content">
		<h1 className='title' contentEditable="true">{title}</h1>
		{children}
	</div>;
}