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

const DeviceSelect = ({i18n, querySelectList, page, permissions, devs, addSelect, showGroup}) => {
	let devName = null;
	let devType = null;
	return (
		<Form.Group inline>
			<Form.Field>
				<label>{i18n&&i18n.t?i18n.t(`page.${page || ''}.form.label.select_device`) : ''}</label>
				<select ref={node => devType = node} onChange={(e) => {
						querySelectList(e.target.value);
					}}>
					<option value="">{i18n&&i18n.t?i18n.t('select.dev_type') : ''}</option>
					{
						permissions.dio ? 
							<option value="do">{i18n&&i18n.t ? i18n.t('select.digitoutput') : ''}</option> : null
					}
					{
						permissions.leone ? 
							<option value="leone">{i18n&&i18n.t ? i18n.t('select.leone') : ''}</option> : null
					}
					{
						permissions.iogroup && showGroup ? 
							<option value="iogroup">{i18n&&i18n.t ? i18n.t('select.iogroup') : ''}</option> : null
					}
				</select>
			</Form.Field>
			<Form.Field>
				<select ref={node => devName = node}>
					{
						devs.map((t, idx) => <option key={idx} value={t.id || ''}>{t.name || ''}</option>)
					}
				</select>
			</Form.Field>
			<Form.Field>
				<Button type="button" basic size="mini" content={i18n&&i18n.t?i18n.t(`page.${page || ''}.form.button.join`) : ''} onClick={()=>{
						let type = '';
						let devname = '';
						let devid = '';
						let typev = '';
						if(devType != null) {
							type = devType.options[devType.selectedIndex].innerHTML;
							typev = devType.value == 'leone' ? 'le' : devType.value;
						}
						if(devName != null) {
							if(devName.options.length == 0) return ;
							devname = devName.options[devName.selectedIndex].innerHTML;
							devid = `${typev}${devName.value}`;
						}
						let json = {
							type,
							name: devname,
							id: devid
						};
						if(!devType.value || !type || !devname) return ;
						addSelect(json);
					}} />
			</Form.Field>
		</Form.Group>
	)
}

export default DeviceSelect;