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

const loginForm = ({i18n, page, onSubmit}) => {
	let account;
	let password;
	return (
		<Form size="large" onSubmit={(e, data) => { 
				e.preventDefault();
				onSubmit(data.formData);
			 }} serializer={e => { 
				 let acc = e.querySelector('input[name="acc"]').value;
				 let pass = e.querySelector('input[name="pass"]').value;
				 return {account: acc, password: pass};
			  }}>
			<Segment stacked={true} >
				<Form.Field>
					<Input icon="user" iconPosition="left" name="acc" placeholder={typeof i18n.t == 'function' ? i18n.t(`${page}.input.placeholder.account`) : ''} />
				</Form.Field>
				<Form.Field>
					<Input icon="lock" iconPosition="left" name="pass" type="password" placeholder={typeof i18n.t == 'function' ? i18n.t(`${page}.input.placeholder.password`) : ''} />
				</Form.Field>
				<Button type="submit" color="teal" size="large" fluid={true} content={typeof i18n.t == 'function' ? i18n.t(`${page}.button.login`) : ''} />
			</Segment>
		</Form>
	);
}

export default loginForm;