import React from 'react';
import {Table, Input, Form, Button} from 'semantic-ui-react';

const AIOForm = ({i18n, open, type, data, onSubmit, onClose}) => {
	if(!open) return null;
	let input = {
		name: data.name || '',
		portnum: data.portnum,
		type: data.type,
		scale_min: data.scale_min || 0,
		scale_max: data.scale_max || 0,
		range_min: data.range_min || 0,
		range_max: data.range_max || 0
	}
	return (
		<Table.Row>
			<Table.Cell><Input name="name" onChange={(e,d)=>{input.name = d.value}} defaultValue={data.name || ''}/></Table.Cell>
			<Table.Cell><Input name="portnum" onChange={(e,d)=>{input.portnum = d.value}} defaultValue={data.portnum}/></Table.Cell>
			<Table.Cell><Input name="type" onChange={(e,d)=>{input.type = d.value}} defaultValue={data.type}/></Table.Cell>
			<Table.Cell>
				<Input name="range_min" size="small" label="Min" onChange={(e,d)=>{input.range_min = d.value}} defaultValue={data.range_min || '0'}/>
				<Input name="range_max" size="small" label="Max" onChange={(e,d)=>{input.range_max = d.value}} defaultValue={data.range_max || '0'}/>
			</Table.Cell>
			<Table.Cell>
				<Input name="scale_min" size="small" label="Min" onChange={(e,d)=>{input.scale_min = d.value}} defaultValue={data.scale_min || '0'}/>
				<Input name="scale_max" size="small" label="Max" onChange={(e,d)=>{input.scale_max = d.value}} defaultValue={data.scale_max || '0'}/>
			</Table.Cell>
			<Table.Cell>
				<Button basic size="tiny" content="Submit" type="button" onClick={()=>{
						let json = {
							...input,
							id: data.uid || ''
						}
						onSubmit(type, json);
					}} />
				<Button basic size="tiny" content="Cancel" type="button" onClick={()=>{onClose()}} />
			</Table.Cell>
		</Table.Row>
	)
}

export default AIOForm;