/**
 * A button used all over the logger. can be a toggle, a regular old button, or a checkbox with state.
 */
import React from "react";

interface IProps {
	className?: string;
	type?: string;
	title?: string;
	onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;
	active?: boolean;
	activeClass?: string;
}

export default class LoggerButton extends React.PureComponent<IProps> {
	constructor(props: IProps) {
		super(props);
	}

	render() {
		let classes = this.props.className || "";
		if (this.props.type === "checkbox") {
			classes = `${classes} inline-checkbox `;
		} else {
			classes = `${classes} fsbl-logger-button `;
		}
		if (this.props.active) {
			classes = classes + (this.props.activeClass || " active");
		}
		const Checkbox = () => {
			const checkboxClasses = `checkbox${this.props.active ? " active" : ""}`;
			return (
				<div className={checkboxClasses}>
					<div className="checkbox-background" />
				</div>
			);
		};

		return (
			<div
				className={classes}
				title={this.props.title || ""}
				tabIndex={0}
				role="button"
				onClick={this.props.onClick}
				onKeyDown={(e) => {
					if (e.key === "Enter") {
						this.props.onClick(e);
					}
				}}
				{...(this.props.type === "checkbox"
					? {}
					: {
							"aria-pressed": this.props.active,
					  })}
			>
				{this.props.type === "checkbox" && <Checkbox />}
				{this.props.children}
			</div>
		);
	}
}