/**
 * Preferences that can be set by the user.
 */
import React, { Component } from "react";
import LoggerButton from "../../../../LoggerButton";
import LoggerStore from "../../../../../stores/LoggerStore";

interface IProps {}
interface IState {
	showOnStartup: boolean;
	showOnError: boolean;
}

class Settings extends Component<IProps, IState> {
	constructor(props: IProps) {
		super(props);
		this.state = {
			showOnStartup: LoggerStore.getShowOnStartup(),
			showOnError: LoggerStore.getShowOnError(),
		};
		this.getShowLoggerOnError = this.getShowLoggerOnError.bind(this);
		this.getShowLoggerOnStartup = this.getShowLoggerOnStartup.bind(this);
	}

	getShowLoggerOnError() {
		this.setState({
			showOnError: LoggerStore.getShowOnError(),
		});
	}

	getShowLoggerOnStartup() {
		this.setState({
			showOnStartup: LoggerStore.getShowOnStartup(),
		});
	}

	componentDidMount() {
		LoggerStore.addListener("showOnStartup", this.getShowLoggerOnStartup);
		LoggerStore.addListener("showOnError", this.getShowLoggerOnError);
	}

	componentWillUnmount() {
		LoggerStore.removeListener("showOnStartup", this.getShowLoggerOnStartup);
		LoggerStore.removeListener("showOnError", this.getShowLoggerOnError);
	}

	render() {
		return (
			<div>
				<LoggerButton
					className="checkbox-row"
					type="checkbox"
					active={this.state.showOnStartup}
					onClick={LoggerStore.toggleShowOnStartup}
				>
					Open Logger on Startup
				</LoggerButton>
				<LoggerButton
					type="checkbox"
					className="checkbox-row"
					active={this.state.showOnError}
					onClick={LoggerStore.toggleShowOnError}
				>
					Open Logger on Error
				</LoggerButton>
			</div>
		);
	}
}

export default Settings;