'use strict';

const React = require("react");

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

// FIXME: Track full collapsing state throughout the tree
// FIXME: Remove left-margin if there are zero collapsible items (as we don't need to render the collapse icons)
// FIXME: Only trigger select when the selected item has actually changed!

module.exports = function List({ x, y, 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("uilibComponent", "list")} style={generateGridItemStyle({ x, y })}>
				{children}
			</div>
		</ListItemContext.Provider>
	);
};
