/**
 * Knocks out different types of logs from the view (e.g., turn of all errors). Doesn't affect capture state, just log visibility.
 */
import React, { Component } from "react";
import LoggerButton from "../../../LoggerButton";
import LoggerStore from "../../../../stores/LoggerStore";

const SLOW_DIFF = 100;
const VERY_SLOW_DIFF = 300;
const MONSTROUSLY_SLOW_DIFF = 500;

interface IProps {}
interface IState {
	logState: any;
	rowTimeDiff: any;
	logCounts: {
		master: number;
		display: number;
	};
}

class LogLevelFilters extends Component<IProps, IState> {
	constructor(props: IProps) {
		super(props);
		const initialLogState = LoggerStore.getLogState();

		this.state = {
			logState: initialLogState,
			rowTimeDiff: LoggerStore.getRowTimeDiff(),
			logCounts: LoggerStore.getLogCounts(),
		};
		this.updateRowTimeDiff = this.updateRowTimeDiff.bind(this);
		this.getNewDisplayState = this.getNewDisplayState.bind(this);
		this.loggerGetNewMessages = this.loggerGetNewMessages.bind(this);
	}

	getNewDisplayState() {
		const newLogState = LoggerStore.getLogState();
		this.setState({ logState: newLogState });
	}

	updateRowTimeDiff() {
		this.setState({
			rowTimeDiff: LoggerStore.getRowTimeDiff(),
		});
	}

	componentDidMount() {
		LoggerStore.addListener("rowTimeDiffChange", this.updateRowTimeDiff);
		LoggerStore.addListener("newDisplayState", this.getNewDisplayState);
		LoggerStore.addListener("loggerNewMessages", this.loggerGetNewMessages);
	}

	componentWillUnmount() {
		LoggerStore.removeListener("rowTimeDiffChange", this.updateRowTimeDiff);
		LoggerStore.removeListener("newDisplayState", this.getNewDisplayState);
		LoggerStore.removeListener("loggerNewMessages", this.loggerGetNewMessages);
	}

	loggerGetNewMessages() {
		this.setState({
			logCounts: LoggerStore.getLogCounts(),
		});
	}

	allToggle() {
		LoggerStore.toggleDisplayAll();
	}

	errorsToggle() {
		LoggerStore.toggleDisplayErrors();
	}

	warningsToggle() {
		LoggerStore.toggleDisplayWarnings();
	}

	infoToggle() {
		LoggerStore.toggleDisplayInfo();
	}

	logsToggle() {
		LoggerStore.toggleDisplayLogs();
	}

	debugToggle() {
		LoggerStore.toggleDisplayDebug();
	}

	verboseToggle() {
		LoggerStore.toggleDisplayVerbose();
	}

	getRowTimeDiffClasses() {
		let rowDiffClasses = "fsbl-logger-row-diff";

		if (this.state.rowTimeDiff) {
			let speedCategory = "okay";
			if (this.state.rowTimeDiff > SLOW_DIFF) {
				speedCategory = "slow";
			}
			if (this.state.rowTimeDiff > VERY_SLOW_DIFF) {
				speedCategory = "very-slow";
			}
			if (this.state.rowTimeDiff > MONSTROUSLY_SLOW_DIFF) {
				speedCategory = "beyond-help";
			}
			rowDiffClasses = `${rowDiffClasses} fsbl-logger-row-diff-${speedCategory}`;
		}
		return rowDiffClasses;
	}

	top() {
		LoggerStore.setTop();
	}

	bottom() {
		LoggerStore.setBottom();
	}

	render() {
		const rowDiffClasses = this.getRowTimeDiffClasses();
		const extraRowPadding = {
			justifyContent: "space-between",
			paddingTop: "5px",
			paddingBottom: "5px",
		};
		return (
			<div id="log-level-filters" className="right-panel-controls logger-row" style={extraRowPadding}>
				<div className="flex-column" style={{ marginRight: "15px" }}>
					<div className="fsbl-logger-button-group-label">Log Levels</div>
					<div className="fsbl-logger-button-group fsbl-logger-buttons">
						<LoggerButton
							className="fsbl-logger-toggle fsbl-logger-../LoggerButton"
							type="../LoggerButton"
							onClick={this.allToggle}
						>
							All
						</LoggerButton>
						<LoggerButton className="fsbl-logger-toggle" active={this.state.logState.Error} onClick={this.errorsToggle}>
							Error
						</LoggerButton>
						<LoggerButton
							className="fsbl-logger-toggle"
							active={this.state.logState.Warn}
							onClick={this.warningsToggle}
						>
							Warning
						</LoggerButton>
						<LoggerButton className="fsbl-logger-toggle" active={this.state.logState.Log} onClick={this.logsToggle}>
							Log
						</LoggerButton>
						<LoggerButton className="fsbl-logger-toggle" active={this.state.logState.Info} onClick={this.infoToggle}>
							Info
						</LoggerButton>
						<LoggerButton className="fsbl-logger-toggle" active={this.state.logState.Debug} onClick={this.debugToggle}>
							Debug
						</LoggerButton>
						<LoggerButton
							className="fsbl-logger-toggle"
							active={this.state.logState.Verbose}
							onClick={this.verboseToggle}
						>
							Verbose
						</LoggerButton>
					</div>
					<div className="fsbl-logger-button-group-label">
						<b>{this.state.logCounts.display}</b>
						&nbsp;of &nbsp;
						<b>{this.state.logCounts.master}</b>
						&nbsp; lines visible
					</div>
				</div>
				<div className="delta-box-wrapper flex-column">
					<div className="fsbl-logger-button-group-label">Delta</div>
					<div className="fsbl-logger-buttons">
						<div className={rowDiffClasses}>{this.state.rowTimeDiff !== null ? this.state.rowTimeDiff : "N/A"}</div>
					</div>
				</div>
				<div className="flex-column pull-right">
					<div className="fsbl-logger-button-group fsbl-logger-buttons">
						<LoggerButton onClick={this.top} title="Ctrl+Up">
							Scroll Top
						</LoggerButton>
						<LoggerButton onClick={this.bottom} title="Ctrl+Down">
							Scroll Bottom
						</LoggerButton>
						<LoggerButton title="CTRL+ALT+X" className="fsbl-logger-button-negative" onClick={LoggerStore.clearData}>
							Clear Data
						</LoggerButton>
					</div>
				</div>
			</div>
		);
	}
}

export default LogLevelFilters;
