"use strict";

const React = require("react");
const asExpression = require("as-expression");

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

module.exports = function ButtonSet({ direction, choice, children }) {
	let { withTheme } = useTheme({ control: "buttonSet", defaultStyle });
	let [ selectedItem, setSelectedItem ] = React.useState();

	// direction: horizontal, vertical
	// FIXME: Validate direction

	let wrappedChildren = asExpression(() => {
		if (choice === true) {
			return (
				<contexts.button_onClick.Provider value={setSelectedItem}>
					<contexts.button_selectedID.Provider value={selectedItem}>
						{children}
					</contexts.button_selectedID.Provider>
				</contexts.button_onClick.Provider>
			);
		} else {
			return children;
		}
	});

	return (
		<div className={withTheme("buttonSet", `direction-${direction}`)}>
			{wrappedChildren}
		</div>
	);
};