import React from 'react';
import {Modal, Segment, Menu, Label, Container, Header, List, Table} from 'semantic-ui-react';
import {convertTime} from '../../../../tools';

const stateDefault = () => ({
    open: false,
    tabIdx: 1
})
class IPMIInfoModal extends React.Component {
    state = {...stateDefault()}
    componentWillReceiveProps(nextProps){
        if(nextProps.open != this.state.open){
            if(nextProps.open == false){
                this.setState({...stateDefault()})
            }else{
                this.setState({
                    open: true
                })
            }
        }
    }

    changeIdx = (idx) => {
        this.setState({
            tabIdx: idx
        })
    }

    getInfoView = () => {
        switch(this.state.tabIdx){
            case 1:
                return <BMCContent group={this.props.bmcgroup} data={this.props.bmcdata} />
            case 2:
                return <SensorContent sensor={this.props.sensor} />
            case 3:
                return <LogContent log={this.props.log} />
            default:
                return null;
        }
    }

    render() {
        let {closeModal} = this.props;
        return (
            <Modal size="fullscreen" open={this.state.open} onClose={()=>closeModal('ipmiinfo')}>
                <Modal.Header content="IPMI Info" />
                <Modal.Content>
                    <Menu attached="top" tabular>
                        <Menu.Item name="BMC Info" active={this.state.tabIdx == 1} onClick={()=>this.changeIdx(1)} />
                        <Menu.Item name="Sensor" active={this.state.tabIdx == 2} onClick={()=>this.changeIdx(2)} />
                        <Menu.Item name="Log" active={this.state.tabIdx == 3} onClick={()=>this.changeIdx(3)} />
                    </Menu>
                    <Segment attached="bottom">
                        {this.getInfoView()}
                    </Segment>
                </Modal.Content>
            </Modal>
        )
    }
}

const BMCContent = ({group, data}) => {
    
    return (
        <Container fluid>
            {
                group.map((t,idx) => (
                    <Segment key={idx}>
                        <Header as="h3" color="blue">
                            {t.name}
                            <Header.Subheader>{t.value}</Header.Subheader>
                        </Header>
                        <List>
                        {
                            data.map((t2, idx) => {
                                if(t2.guid != t.guid) return null;
                                return (
                                <List.Item key={idx}>
                                    <Label content={t2.name} basic />
                                    {t2.value}
                                </List.Item>
                            )})
                        }
                        </List>
                    </Segment>
                ))
            }
        </Container>
    )
}

const LogContent = ({log}) => {

    return (
        <Container fluid>
            <Table>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>行號</Table.HeaderCell>
                        <Table.HeaderCell>時間</Table.HeaderCell>
                        <Table.HeaderCell>內容</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>
                <Table.Body>
                    {
                        log.map((t,idx) => (
                            <Table.Row>
                                <Table.Cell>{t.line}</Table.Cell>
                                <Table.Cell>{convertTime(t.time, true)}</Table.Cell>
                                <Table.Cell>{t.content}</Table.Cell>
                            </Table.Row>
                        ))
                    }
                </Table.Body>
            </Table>
        </Container>
    )
}

const SensorContent = ({sensor}) => {

    return (
        <Container fluid>
            <Table>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>名稱</Table.HeaderCell>
                        <Table.HeaderCell>數值</Table.HeaderCell>
                        <Table.HeaderCell>單位</Table.HeaderCell>
                        <Table.HeaderCell>狀態</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>
                <Table.Body>
                    {
                        sensor.map((t,idx) => (
                            <Table.Row>
                                <Table.Cell>{t.name}</Table.Cell>
                                <Table.Cell>{t.value}</Table.Cell>
                                <Table.Cell>{t.unit}</Table.Cell>
                                <Table.Cell>{t.status}</Table.Cell>
                            </Table.Row>
                        ))
                    }
                </Table.Body>
            </Table>
        </Container>
    )
}

export default IPMIInfoModal;