/**
 * Bar on the left side of the logger that changes the active view.
 */
import React, { Component } from "react";
import LoggerStore from "../stores/LoggerStore";

interface IProps {
	activeView: string;
}

class ViewSwitcher extends Component<IProps> {
	getClasses(view: string) {
		let classes = "view-label";
		if (view === this.props.activeView) {
			classes = `${classes} view-label-active`;
		}
		return classes;
	}

	render() {
		return (
			<div className="view-switcher" role="tablist">
				<div
					role="tab"
					aria-selected={this.props.activeView === "logger"}
					className={this.getClasses("logger")}
					onClick={LoggerStore.setLoggerVisible}
					tabIndex={0}
					onKeyDown={(e) => {
						if (e.key === "Enter") {
							LoggerStore.setLoggerVisible();
						}
					}}
				>
					Logs
				</div>
				<div
					role="tab"
					aria-selected={this.props.activeView === "config"}
					className={this.getClasses("config")}
					onClick={LoggerStore.setConfigVisible}
					tabIndex={0}
					onKeyDown={(e) => {
						if (e.key === "Enter") {
							LoggerStore.setConfigVisible();
						}
					}}
				>
					Conf
				</div>
			</div>
		);
	}
}

export default ViewSwitcher;