import React from 'react';
import { List, Label } from 'semantic-ui-react';
import {convertTime} from '../../../tools'

const StatusItem = ({ i18n, data }) => {
    let iotype = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.porttype') : [];
    let iot = {};
    for(let i in iotype){
        iot[iotype[i].code] = iotype[i].name;
    }
    let tc = {
        "1": "orange",
        "2": "green",
        "3": "violet",
        "4": "brown"
    }
    return (
        <List.Item>
            <Label basic size="small" color="teal" content={`Port: ${data.port}`} />
            <Label basic size="small" color={tc[data.type] || 'blue'} content={`Type: ${iot[data.type]}`} />
            {
                data.type == 3 || data.type == 4 ? 
                (<Label basic size="small" color="teal" content={`Name: ${data.name}`} />) :
                null
            }
            <Label basic size="small" color="blue" content={`數值: ${data.value2}`}/>
            <List.Description style={{textAlign: 'right'}}>
                {`最後更新於: ${convertTime(data.tst, true)}`}
            </List.Description>
        </List.Item>
    )
}

export default StatusItem;