import React from 'react';
import {Table, Button, Label, Item} from 'semantic-ui-react';

const ListItem = ({i18n, data, dos, les, openItemModal, onDelete, openModal}) => {
	let devs = data.iogroupid || '';
	let dev = devs.split(',');
	let items = [];
	if(dev.length > 0){
		for(let i in dev){
			if(/^do/i.test(dev[i])){
				for(let j in dos){
					if(`do${dos[j].douid}` == dev[i]) {
						items.push({
							type: 'DigitOutput',
							name: dos[j].doname,
							id: dev[i]
						});
						break;
					}
				}
			}else if(/^le/i.test(dev[i])){
				for(let j in les){
					if(`le${les[j].leonelistuid}` == dev[i]) {
						items.push({
							type: 'LeOne',
							name: les[j].leonename,
							id: dev[i]
						});
						break;
					}
				}
			}
		}
	}
	return (
		<Table.Row>
			<Table.Cell>
				<Button type="button" basic size="tiny" color="red" content={i18n&&i18n.t ? i18n.t('page.iogroup.table.button.del') : ''} onClick={()=>{onDelete(data.iogroupuid)}} />
				<Button type="button" basic size="tiny" color="blue" content={i18n&&i18n.t ? i18n.t('page.iogroup.table.button.edit') : ''} onClick={() => {openModal(1, data, items)}}/>
			</Table.Cell>
			<Table.Cell>{data.iogroupname}</Table.Cell>
			<Table.Cell>
				{
					items.length > 0 ? 
					(items.length == 1 ?
						<Item><Label content={items[0].type} />{items[0].name}</Item>: 
						<Button size="tiny" basic content={i18n&&i18n.t ? i18n.t('page.iogroup.table.button.showgroup') : ''} onClick={()=>{openItemModal(items)}}/> ) :
					 ''
				}
			</Table.Cell>
		</Table.Row>
	)
}

export default ListItem;