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

const LeOneModal = ({i18n, open, type, data, onSubmit, onClose}) => {

	return (
		<Modal open={open}>
			<Modal.Header content={i18n&&i18n.t ? (type == 1 ? i18n.t('page.leone.form.title.edit') : i18n.t('page.leone.form.title.add')) : '' } />
			<Modal.Content>
				<Form onSubmit={(e,d) => {
						e.preventDefault();
						onSubmit(type, d.formData);
					}} serializer={e => {
						let json = {
							id: data.leonelistuid || 0,
							name: e.querySelector('input[name="name"]').value,
							ip: e.querySelector('input[name="ip"]').value,
							password: e.querySelector('input[name="password"]').value
						};

						return json ;
					}}>
					<Form.Field>
						<Input label={i18n&&i18n.t?i18n.t('page.leone.form.label.name'):''} name="name" defaultValue={data.leonename || ''} />
					</Form.Field>
					<Form.Field>
						<Input label={i18n&&i18n.t?i18n.t('page.leone.form.label.ip'):''} name="ip" disabled={type == 1} defaultValue={data.leoneip || ''} />
					</Form.Field>
					<Form.Field>
						<Input label={i18n&&i18n.t?i18n.t('page.leone.form.label.password'):''} name="password" defaultValue={data.leonepassword || ''} />
					</Form.Field>
					<Grid columns={2}>
						<Grid.Column>
							<Button fluid type="submit" content={i18n&&i18n.t?i18n.t('page.leone.form.button.submit'):''}/>
						</Grid.Column>
						<Grid.Column>
							<Button fluid type="button" content={i18n&&i18n.t?i18n.t('page.leone.form.button.cancel'):''} onClick={() => {onClose()}}/>
						</Grid.Column>
					</Grid>
				</Form>
			</Modal.Content>
		</Modal>
	)
}

export default LeOneModal;