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

const ModbusModal = ({i18n, open, type, data, onSubmit, onClose}) => {
	if(!i18n || Object.keys(i18n).length == 0) return null;

	return (
		<Modal open={open}>
			<Modal.Header content={type == 1 ? '修改裝置' : '新增裝置'} />
			<Modal.Content>
				<Form onSubmit={(e, d) => {
						e.preventDefault();
						onSubmit(type, d.formData);
					}} serializer={e => {
						let json = {
							name: '',
							node: '',
							type: '',
							id: data.uid || '',
							original_node: data.node || ''
						};

						let n = e.querySelector('input[name="name"]');
						if(n && 'value' in n) json.name = n.value;
						let nn = e.querySelector('input[name="node"]');
						if(nn && 'value' in nn) json.node = nn.value;
						let type = e.querySelector('input[name="type"]');
						if(type && 'value' in type) json.type = type.value;

						return json ;
					}}>
					<Form.Field>
						<Input name="name" defaultValue={data.name || ''} label="Name"/>
					</Form.Field>
					<Form.Field>
						<Input name="node" defaultValue={data.node} label="Node"/>
					</Form.Field>
					<Form.Field>
						<Input name="type" defaultValue={data.type} label="Type" placeholder="預設請留空"/>
					</Form.Field>
					<Grid columns={2}>
						<Grid.Column>
							<Button content="Submit" fluid type="submit" />
						</Grid.Column>
						<Grid.Column>
							<Button content="Cancel" fluid type="button" onClick={()=>{onClose()}} />
						</Grid.Column>
					</Grid>
				</Form>
			</Modal.Content>
		</Modal>
	)
}

export default ModbusModal;