import { React, nests, nestsReact } from "../../common";
import { toggle } from "../../plugin";
import webpack from "../../webpack";

const Checkbox = webpack.findByDisplayName("Checkbox");

interface HummusUI extends React.Component {
	state: { tg: number }; //we love jank!
}

class HummusUI extends React.Component {
	constructor(props: any) {
		super(props);
		this.state = {
			tg: 0
		};
	}

	render() {
		const extNest = demon.summon("internal/nest");
		return (
			<div className="control-group demon-settings-card-header">
				<label className="demon-settings-header-size30">Plugins</label>
				{Object.keys(extNest.ghost.plugins).map((k) => {
					return (
						<div className="demon-settings-card-base">
							<span>
								<Checkbox
									className={`demon-stub-plugin-checkbox-${k}`}
									checked={extNest.ghost.plugins[k].enabled}
									onChange={async () => {
										toggle(k);
										const ele =
											document.getElementsByClassName(
												`demon-stub-plugin-checkbox-${k}`
											)[0] as HTMLInputElement;
										//ele.value = extNest.ghost.pluginsStatus[k].running
										if (!extNest.ghost.plugins[k].enabled) {
											ele.value = "on";
										} else {
											ele.value = "off";
										}
										this.setState({ tg: !this.state.tg });
									}}
								>
									{k}
								</Checkbox>
							</span>
						</div>
					);
				})}
			</div>
		);
	}
}

export default HummusUI;