"use strict";

const React = require("react");

const useTheme = require("../../util/themeable");
const defaultStyle = require("./style.css");
const generateGridItemStyle = require("../../util/generate-grid-item-style");
const Button = require("../button");
const ProgressBar = require("../progress-bar");

module.exports = function ProgressButton({ x, y, horizontal, vertical, type, icon, progress, progressColor, children }) {
	// FIXME: progressColor in theme, same for custom button style / proportions -- maybe make `type` a thing that takes an array, for multiple type classes? to deal with composite controls
	
	let { withTheme } = useTheme({ control: "progressButton", defaultStyle });

	let direction = (vertical === true)
		? "vertical"
		: "horizontal";

	return (
		<div className={withTheme("uilibComponent", "progressButton", `direction-${direction}`)}  style={generateGridItemStyle({ x, y })}>
			<Button type={type} icon={icon}>
				{children}
			</Button>
			<ProgressBar progress={progress} progressColor={progressColor} />
		</div>
	);
};