/**
 * All of the filters that can affect what's visible in the view.
 */
import React from "react";
import ResizeObserver from "resize-observer-polyfill";
import _debounce from "lodash/debounce";
import LoggerButton from "../../../../LoggerButton";
import LoggerStore, { SearchString } from "../../../../../stores/LoggerStore";
import CategoryFilters from "./CategoryFilters";

const debouncedResize = _debounce(LoggerStore.emitResizeTimeout, 200);

interface IProps {}
interface IState {
	highLight1: SearchString;
	highLight2: SearchString;
	highLight3: SearchString;
	highLight4: SearchString;
	devMode: boolean;
	systemMode: boolean;
	perfMode: boolean;
	filter: {
		logic: string;
	};
	clientListWidth: number;
}

// component for what is displayed locally in central logger
export default class LoggerClientControlList extends React.Component<IProps, IState> {
	constructor(props: IProps) {
		super(props);

		this.state = {
			highLight1: LoggerStore.getFilterStrings()[0],
			highLight2: LoggerStore.getFilterStrings()[1],
			highLight3: LoggerStore.getFilterStrings()[2],
			highLight4: LoggerStore.getFilterStrings()[3],
			devMode: LoggerStore.getDevModeState(),
			systemMode: LoggerStore.getSystemModeState(),
			perfMode: LoggerStore.getPerfModeState(),
			filter: {
				logic: LoggerStore.getFilterLogic(),
			},
			clientListWidth: 2,
		};

		this.highLight1 = this.highLight1.bind(this);
		this.highLight2 = this.highLight2.bind(this);
		this.highLight3 = this.highLight3.bind(this);
		this.highLight4 = this.highLight4.bind(this);
		this.getNewModeState = this.getNewModeState.bind(this);
		this.updateFilterLogic = this.updateFilterLogic.bind(this);
	}

	componentDidMount() {
		LoggerStore.addListener("ModeStateChange", this.getNewModeState);
		LoggerStore.addListener("filterLogicChange", this.updateFilterLogic);
		const Observer = new ResizeObserver(() => {
			setTimeout(debouncedResize, 200);
		});

		const observeElem = document.getElementById("displayControl");
		if (observeElem) Observer.observe(observeElem);
	}

	componentWillUnmount() {
		LoggerStore.removeListener("ModeStateChange", this.getNewModeState);
		LoggerStore.removeListener("filterLogicChange", this.updateFilterLogic);
	}

	updateFilterLogic() {
		this.setState({
			filter: {
				logic: LoggerStore.getFilterLogic(),
			},
		});
	}

	getNewModeState() {
		const newDevMode = LoggerStore.getDevModeState();
		const newSystemMode = LoggerStore.getSystemModeState();
		const newPerfMode = LoggerStore.getPerfModeState();
		this.setState({
			devMode: newDevMode,
			systemMode: newSystemMode,
			perfMode: newPerfMode,
		});
	}

	highLight1(event) {
		this.setState({ highLight1: { str: event.target.value } });
		LoggerStore.setFilter1(event.target.value);
	}

	highLight2(event) {
		this.setState({ highLight2: { str: event.target.value } });
		LoggerStore.setFilter2(event.target.value);
	}

	highLight3(event) {
		this.setState({ highLight3: { str: event.target.value } });
		LoggerStore.setFilter3(event.target.value);
	}

	highLight4(event) {
		this.setState({ highLight4: { str: event.target.value } });
		LoggerStore.setFilter4(event.target.value);
	}

	setFilterLogicAnd() {
		LoggerStore.setFilterLogic("AND");
	}

	setFilterLogicOr() {
		LoggerStore.setFilterLogic("OR");
	}

	render() {
		return (
			<div id="displayControl">
				<div className="topDiv">
					<div className="logger-row">
						<CategoryFilters
							systemMode={this.state.systemMode}
							devMode={this.state.devMode}
							perfMode={this.state.perfMode}
						/>
					</div>
				</div>
				<div className="logger-row">
					<div className="filter-logic ">
						<div className="fsbl-logger-button-group-label">Filter Logic</div>
						<div className="fsbl-logger-button-group fsbl-logger-buttons">
							<LoggerButton
								className="fsbl-logger-toggle"
								active={this.state.filter.logic === "AND"}
								onClick={this.setFilterLogicAnd}
							>
								AND
							</LoggerButton>
							<LoggerButton
								className="fsbl-logger-toggle"
								active={this.state.filter.logic === "OR"}
								onClick={this.setFilterLogicOr}
							>
								OR
							</LoggerButton>
						</div>
					</div>
				</div>
				<div className="logger-row">
					<div style={{ margin: "2px 10px" }} className="">
						<input
							className="filter filter-0"
							type="text"
							data-active={this.state.highLight1.str === "" ? "inactive" : "active"}
							placeholder="Filter 1"
							value={this.state.highLight1.str}
							onChange={this.highLight1}
						/>
						<input
							className="filter filter-1"
							type="text"
							data-active={this.state.highLight2.str === "" ? "inactive" : "active"}
							placeholder="Filter 2"
							value={this.state.highLight2.str}
							onChange={this.highLight2}
						/>
						<input
							className="filter filter-2"
							type="text"
							data-active={this.state.highLight3.str === "" ? "inactive" : "active"}
							placeholder="Filter 3"
							value={this.state.highLight3.str}
							onChange={this.highLight3}
						/>
						<input
							className="filter filter-3"
							type="text"
							data-active={this.state.highLight4.str === "" ? "inactive" : "active"}
							placeholder="Filter 4"
							value={this.state.highLight4.str}
							onChange={this.highLight4}
						/>
					</div>
				</div>
			</div>
		);
	}
}
