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

const CmdModal = ({i18n, open, id, devname, cmd, onSubmit, onClose}) => {
	let actlist = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.action_list') : [];
	let act = actlist.filter(t => t.cmd == cmd);
	
	return (
		<Modal open={open} closeOnDimmerClick={false}>
			<Modal.Content>
				<Form onSubmit={(e, d) => {
						e.preventDefault();
						onSubmit(d.formData);
					}} serializer={e => {
						let json = {
							devs: `le${id}`
						};

						json.cmd = cmd;
						if(json.cmd == 2){
							let el = e.querySelector('input[name="temp"]');
							if(el && 'value' in el){
								json.cmd = `${json.cmd} ${el.value}`
							}
						}

						return json;
					}}>
					<Header as="h4" content={devname || ''}/>
					<Header as="h4" content={`${i18n&&i18n.t?i18n.t('page.leone.form.label.run_command'):''} ${act[0] ? act[0].name : ''}`} />
					{
						cmd && cmd == '2' ? 
							(<Form.Field>
								<Input fluid name="temp" label={i18n&&i18n.t ? i18n.t('page.leone.form.label.temp') : ''}/>
							</Form.Field>) :
							null
					}
					<Grid columns={2} style={{marginTop: '15px'}}>
						<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 CmdModal;