import React from 'react';
import {Table, Input, Checkbox, Label} from 'semantic-ui-react';

const DiItem = ({i18n, cusKey, data, onNameChange, onLogicChange, status}) => {

	return (
		<Table.Row>
			<Table.Cell>
				<Label content={cusKey}/>
			</Table.Cell>
			<Table.Cell width={4}>
				<Input fluid name="diname" value={data.diname || ''} onChange={(e) => onNameChange(cusKey, e.target.value)} />
			</Table.Cell>
			<Table.Cell>
				<Checkbox toggle={true} label={i18n&&i18n.t ? i18n.t('page.dio.form.label.logic') : ''} checked={data.dilogic == 1 ? true : false} onChange={(e, d) => onLogicChange(cusKey, d.checked)}/>
			</Table.Cell>
			<Table.Cell>
				<span>{i18n&&i18n.t ? i18n.t('page.dio.form.label.di_status') : ''} <Label color={status == 0 ? 'green' : 'red'} size="tiny" content={
					i18n&&i18n.t ? 
						(status == 0 ? i18n.t('page.dio.form.label.di_not_triggered') : i18n.t('page.dio.form.label.di_triggered')) : 
						"Loading..."
					}/></span>
			</Table.Cell>
		</Table.Row>
	)
}

export default DiItem;