/**
 * Changes which types of logs are captured for a given client. Can also remove all of the client's logs from the view.
 */
import React from "react";
import LoggerButton from "../../../../LoggerButton";
import LoggerStore from "../../../../../stores/LoggerStore";

interface IProps {
	clientName: string;
	fileMode?: boolean;
	viewId: number | null;
	windowName: string;
	displayName: string;
	centralLoggerNamePrefix: any;
}
interface IState {
	clientState: any;
	showClientState: any;
	registeredClients: any;
	hideInactive: any;
	fileMode: any;
	clientMode: any;
	viewId: any;
}

// once class per client registered with logger; primarily this components provides UI affecting communication with the client
export default class LoggerClientControl extends React.Component<IProps, IState> {
	constructor(props: IProps) {
		super(props);
		this.state = {
			clientState: LoggerStore.getClientState(this.props.clientName),
			showClientState: LoggerStore.getShowClientState(this.props.clientName),
			registeredClients: LoggerStore.getRegisteredClients(),
			hideInactive: LoggerStore.getHideInactiveState(),
			fileMode: this.props.fileMode,
			clientMode: LoggerStore.getClientMode(),
			viewId: this.props.viewId,
		};
		this.showClientToggle = this.showClientToggle.bind(this);
		this.errorsToggle = this.errorsToggle.bind(this);
		this.warningsToggle = this.warningsToggle.bind(this);
		this.infoToggle = this.infoToggle.bind(this);
		this.logsToggle = this.logsToggle.bind(this);
		this.debugToggle = this.debugToggle.bind(this);
		this.verboseToggle = this.verboseToggle.bind(this);
		this.localOnlyToggle = this.localOnlyToggle.bind(this);
		this.getNewClientState = this.getNewClientState.bind(this);
		this.getNewShowClientState = this.getNewShowClientState.bind(this);
		this.getHideInactiveState = this.getHideInactiveState.bind(this);
		this.fileMode = this.fileMode.bind(this);
		this.changeClientMode = this.changeClientMode.bind(this);
	}

	componentDidMount() {
		LoggerStore.addListener("newClientState", this.getNewClientState);
		LoggerStore.addListener("newShowClientState", this.getNewShowClientState);
		LoggerStore.addListener("newHideInactiveState", this.getHideInactiveState);
		LoggerStore.addListener("FileMode", this.fileMode);
		LoggerStore.addListener("ChangeClientMode", this.changeClientMode);
	}

	componentWillUnmount() {
		LoggerStore.removeListener("newClientState", this.getNewClientState);
		LoggerStore.removeListener("newShowClientState", this.getNewShowClientState);
		LoggerStore.removeListener("newHideInactiveState", this.getHideInactiveState);
		LoggerStore.removeListener("FileMode", this.fileMode);
		LoggerStore.removeListener("ChangeClientMode", this.changeClientMode);
	}

	fileMode() {
		this.setState({
			fileMode: LoggerStore.getFileMode(),
		});
	}

	getNewRegisteredClients() {
		this.setState({
			registeredClients: LoggerStore.getRegisteredClients(),
		});
	}

	getNewClientState() {
		this.setState({
			clientState: LoggerStore.getClientState(this.props.clientName),
		});
	}

	getNewShowClientState() {
		this.setState({
			showClientState: LoggerStore.getShowClientState(this.props.clientName),
		});
	}

	getHideInactiveState() {
		this.setState({
			hideInactive: LoggerStore.getHideInactiveState(),
		});
	}

	showClientToggle() {
		LoggerStore.toggleShowClient(this.props.clientName);
	}

	errorsToggle() {
		LoggerStore.toggleClientErrors(this.props.clientName);
	}

	warningsToggle() {
		LoggerStore.toggleClientWarnings(this.props.clientName);
	}

	infoToggle() {
		LoggerStore.toggleClientInfo(this.props.clientName);
	}

	logsToggle() {
		LoggerStore.toggleClientLogs(this.props.clientName);
	}

	debugToggle() {
		LoggerStore.toggleClientDebug(this.props.clientName);
	}

	verboseToggle() {
		LoggerStore.toggleClientVerbose(this.props.clientName);
	}

	localOnlyToggle() {
		LoggerStore.toggleClientLocalOnly(this.props.clientName);
	}

	changeClientMode() {
		this.setState({
			clientMode: LoggerStore.getClientMode(),
		});
	}

	render() {
		const { windowName, displayName, clientName, viewId, centralLoggerNamePrefix } = this.props;

		return (
			<div>
				{this.state.hideInactive && !this.state.showClientState ? null : (
					<div className="fsbl-logger-client-row">
						<div className="fsbl-logger-client-name">
							<LoggerButton
								type="checkbox"
								active={this.state.showClientState}
								onClick={this.showClientToggle}
							></LoggerButton>
							<span
								className="fsbl-logger-client-name-label"
								title={`Click for dev tools; alt-click to show window`}
								tabIndex={0}
								onClick={() => {
									LoggerStore.openClient({ viewId, windowName });
								}}
								onKeyDown={(e) => {
									if (e.key === "Enter") {
										LoggerStore.openClient({ viewId, windowName });
									}
								}}
							>
								{centralLoggerNamePrefix ? `${centralLoggerNamePrefix}-${displayName}` : displayName}
							</span>
						</div>
						{this.state.fileMode ? null : (
							<div className="fsbl-logger-button-group">
								<div className="fsbl-logger-buttons">
									<LoggerButton
										className="fsbl-logger-toggle"
										active={this.state.clientState[this.state.clientMode].Error}
										onClick={this.errorsToggle}
									>
										Errors
									</LoggerButton>
									<LoggerButton
										className="fsbl-logger-toggle"
										active={this.state.clientState[this.state.clientMode].Warn}
										onClick={this.warningsToggle}
									>
										Warning
									</LoggerButton>
									<LoggerButton
										className="fsbl-logger-toggle"
										active={this.state.clientState[this.state.clientMode].Log}
										onClick={this.logsToggle}
									>
										Log
									</LoggerButton>
									<LoggerButton
										className="fsbl-logger-toggle"
										active={this.state.clientState[this.state.clientMode].Info}
										onClick={this.infoToggle}
									>
										Info
									</LoggerButton>

									<LoggerButton
										className="fsbl-logger-toggle"
										active={this.state.clientState[this.state.clientMode].Debug}
										onClick={this.debugToggle}
									>
										Debug
									</LoggerButton>
									{this.state.clientMode === "console" ? null : (
										<span>
											<LoggerButton
												className="fsbl-logger-toggle"
												active={this.state.clientState[this.state.clientMode].Verbose}
												onClick={this.verboseToggle}
											>
												Verbose
											</LoggerButton>
										</span>
									)}
								</div>
							</div>
						)}
					</div>
				)}
			</div>
		);
	}
}
