import React from 'react';
import {Modal, Form, Input, Segment, Grid, Button, Header, List} from 'semantic-ui-react';
import SelectedItem from './SelectedItem';
import DeviceSelect from '../../Common/DeviceSelect';

const GroupModal = ({i18n, open, type, data, devs, permissions, onClose, onSubmit, selected, removeSelect, addSelect, querySelectList}) => {

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

						return json;
					}}>
					<Form.Field>
						<Input label={i18n&&i18n.t?i18n.t('page.iogroup.form.label.name') : ''} name="name" defaultValue={data.iogroupname || ''} />
					</Form.Field>
					<DeviceSelect i18n={i18n} devs={devs} page="iogroup" showGroup={false} permissions={permissions} addSelect={addSelect} querySelectList={querySelectList} />
					<Segment>
						<Header as="h4" content={i18n&&i18n.t ? i18n.t('page.iogroup.form.label.selected_device') : ''} />
						<List divided verticalAlign="middle">
							{
								selected.map((t, idx) => <SelectedItem i18n={i18n} key={idx} data={t} idx={idx} removeSelect={removeSelect}/>)
							}
						</List>
					</Segment>
					<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 GroupModal;