'use strict';

const React = require("react");

const defaultStyle = require("./style.css");
const useTheme = require("../../util/themeable");
const ListItemContext = require("../../contexts/list-item");

// FIXME: Track full collapsing state throughout the tree

module.exports = function List({ children, onPick, onSelect }) {
	let [ selectedItem, setSelectedItem ] = React.useState([]);
	let { withTheme } = useTheme({ control: "list", defaultStyle });

	let itemContext = {
		path: [],
		selectedPath: selectedItem,
		onClick: function (path) {
			if (onSelect != null) {
				onSelect(path);
			}
			
			setSelectedItem(path);
		},
		onDoubleClick: function (path) {
			if (onPick != null) {
				onPick(path);
			}
		}
	};

	return (
		<ListItemContext.Provider value={itemContext}>
			<div className={withTheme("list")}>
				{children}
			</div>
		</ListItemContext.Provider>
	);
};