if (process.env.NODE_ENV === "development") {
	require("preact/debug");
}

import { h, render, Component, Fragment } from "preact";

class Preview extends Component {
	shouldComponentUpdate(nextProps, nextState) {
		return nextProps.output !== this.props.output;
	}

	render() {
		const { input, output } = this.props;
		return (
			<Fragment>
				Preview:
				<div>
					This should never be displayed together with "Error"
				</div>
				<div>... and either this third element</div>
			</Fragment>
		);
	}
}

class App extends Component {
	constructor(props) {
		super(props);

		this.state = {
			input: 'console.log("A");',
			output: null,
			error: null
		};
	}

	run() {
		if ((this.state.input.split('"').length - 1) % 2 !== 0) {
			this.setState({
				error: true,
				output: null
			});
			return;
		}

		const output = "console.log('Hello');";
		this.setState({
			error: null,
			output
		});
	}

	render() {
		return (
			<div>
				<textarea
					onInput={e => this.setState({ input: e.target.value })}
				>
					{this.state.input}
				</textarea>
				<br />
				<button onClick={() => this.run()}>Run!</button>
				<hr />
				{this.state.error ? (
					<div>Error!</div>
				) : (
					this.state.output && (
						<div>
							<textarea>{this.state.output}</textarea>
							<br />
							<Preview
								input={this.state.input}
								output={this.state.output}
							/>
						</div>
					)
				)}
			</div>
		);
	}
}
render(<App />, document.getElementById("root"));