/**
 * Toggles for different categories of logs (e.g., system, dev, perf).
 */
import React, { Component } from "react"; // eslint-disable-line
import LoggerButton from "../../../../LoggerButton";
import LoggerStore from "../../../../../stores/LoggerStore";

interface IProps {
	systemMode: boolean;
	devMode: boolean;
	perfMode: boolean;
}

class CategoryFilters extends Component<IProps> {
	devModeToggle() {
		LoggerStore.devModeToggle();
	}

	systemModeToggle() {
		LoggerStore.systemModeToggle();
	}

	perfModeToggle() {
		LoggerStore.perfModeToggle();
	}

	render() {
		return (
			<div>
				<div className="flex-column">
					<div className="fsbl-logger-button-group-label">Log types</div>
					<div className="fsbl-logger-button-group fsbl-logger-buttons">
						<LoggerButton className="fsbl-logger-toggle" active={this.props.systemMode} onClick={this.systemModeToggle}>
							System
						</LoggerButton>
						<LoggerButton className="fsbl-logger-toggle" active={this.props.devMode} onClick={this.devModeToggle}>
							Dev
						</LoggerButton>
						<LoggerButton className="fsbl-logger-toggle" active={this.props.perfMode} onClick={this.perfModeToggle}>
							Perf
						</LoggerButton>
					</div>
				</div>
			</div>
		);
	}
}

export default CategoryFilters;
