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


const UModal = ({i18n, open, type, data, closeModal, onSubmit}) => {
	return (
		<Modal closeOnDimmerClick={false} open={open}>
			<Modal.Content>
				<Form onSubmit={(e, data) => {
						e.preventDefault();
						onSubmit(data.formData);
					}}
					serializer={e=>{
						let json = {
							type,
							account: e.querySelector('input[name="account"]').value,
							password: e.querySelector('input[name="password"]').value,
							read_privilege: e.querySelector('input[name="read_privilege"]').checked ? 1 : 0,
							write_privilege: e.querySelector('input[name="write_privilege"]').checked ? 1 : 0
						};

						return json;
					}}>
					<Form.Field>
						<Input label={i18n && i18n.t ? i18n.t('page.userlist.form.label.account') : ''} name="account" disabled={type == 1} defaultValue={type == 1 ? data.account : ''} />
					</Form.Field>
					<Form.Field>
						<Input type="password" label={i18n && i18n.t ? i18n.t('page.userlist.form.label.password') : ''} name="password" />
					</Form.Field>
					<Form.Field>
						<Checkbox label={i18n && i18n.t ? i18n.t('page.userlist.form.label.read_privilege') : ''} defaultChecked={data.read_privilege == 1} name="read_privilege" />
					</Form.Field>
					<Form.Field>
						<Checkbox label={i18n && i18n.t ? i18n.t('page.userlist.form.label.write_privilege') : ''} defaultChecked={data.write_privilege == 1} name="write_privilege" />
					</Form.Field>
					<Grid>
						<Grid.Column width={8}>
							<Button type="submit" fluid content={i18n && i18n.t ? i18n.t('page.userlist.form.button.submit') : ''} />
						</Grid.Column>
						<Grid.Column width={8}>
							<Button type="button" fluid content={i18n && i18n.t ? i18n.t('page.userlist.form.button.cancel') : ''} onClick={() => closeModal()} />
						</Grid.Column>
					</Grid>
				</Form>
			</Modal.Content>
		</Modal>
	)
}

export default UModal;