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

const ScanForm = ({i18n, onSubmit}) => {

	return (
		<Form onSubmit={(e, data) => {
				e.preventDefault();
				onSubmit(data.formData);
			}} serializer={e => {
				let json = {
					ip1: e.querySelector('input[name="ip1"]').value,
					ip2: e.querySelector('input[name="ip2"]').value,
					ip3: e.querySelector('input[name="ip3"]').value,
					password: e.querySelector('input[name="pass"]').value
				};

				return json;
			}}>
			<Grid verticalAlign="middle">
				<Grid.Column computer={8} mobile={16}>
					<Form.Group inline={true}>
						<Form.Field>
							<label>{i18n&&i18n.t ? i18n.t('page.leone.form.label.ip') : ''}</label>
							<Input style={{width: '60px'}} defaultValue="192" name="ip1"/>
						</Form.Field>
						<Form.Field>
							<Input style={{width: '60px'}} defaultValue="168" name="ip2"/>
						</Form.Field>
						<Form.Field>
							<Input style={{width: '60px'}} defaultValue="1" name="ip3"/>
						</Form.Field>
						<Form.Field>
							<Input style={{width: '60px'}} defaultValue="*" disabled/>
						</Form.Field>
					</Form.Group>
					<Form.Group inline={true}>
						<Form.Field>
							<label>{i18n&&i18n.t ? i18n.t('page.leone.form.label.password') : ''}</label>
							<Input name="pass" />
						</Form.Field>
					</Form.Group>
				</Grid.Column>
				<Grid.Column computer={8} mobile={16}>
					<Button type="submit" fluid icon="search" content={i18n&&i18n.t ? i18n.t('page.leone.form.button.scan') : ''} />
				</Grid.Column>
			</Grid>
		</Form>
	)
}

export default ScanForm;