/* eslint-disable react/prop-types */

import * as React from 'react';

function Sidebar( {	
	runtimes,
	mode,
	onRuntimesChange,
	onModeChange
} ) {
	return (
		<aside className="paper flex-grow-1">
			<div className="option">
				<div>{'Runtimes:'}</div>
				{[ 'html5', 'agent' ].map( runtimesDef => (
					<div key={runtimesDef}>
						<input
							id={runtimesDef}
							type="radio"
							name={runtimesDef}
							checked={runtimesDef === runtimes}
							value={runtimesDef}
							onChange={onRuntimesChange}
						/>
						<label htmlFor={runtimesDef}>{runtimesDef}</label>
					</div>
				) )}
			</div>
			<div className="option">
				<div>{'Mode:'}</div>
				{[ 'edit', 'view' ].map( modeDef => (
					<div key={modeDef}>
						<input
							id={modeDef}
							type="radio"
							name={modeDef}
							checked={modeDef === mode}
							value={modeDef}
							onChange={onModeChange}
						/>
						<label htmlFor={modeDef}>{modeDef}</label>
					</div>
				) )}
			</div>
		</aside>
	);
}

export default Sidebar;