import React from 'react';
import { Container, Segment, Menu, List, Grid } from 'semantic-ui-react';
import {getRequest} from '../../../actions';
import DevList from './DevList';
import IPMIPage from './IPMIPage';
import DevModal from './Modals/DevModal';
import IPMIModal from './Modals/IPMIModal';
import IPMIInfoModal from './Modals/IPMIInfoModal';

const stateDefault = ()=>({
    list: [],
    bmctl: [],
    devSel: {
        id: null,
        type: null,
        data: {
            snmp: [],
            ipmi: []
        }
    },
    devModal: {
        open: false,
        type: 0,
        data: {}
    },
    ipmiModal: {
        open: false,
        type: 0,
        data: {}
    },
    ipmiInfo: {
        open: false,
        ipmi: [],
        log: [],
        sensor: [],
        bmcdata: [],
        bmcgroup: []
    }
})

class ServerPage extends React.Component {
    state = {...stateDefault()}

    componentDidMount(){
        this.getDevList();
        this.getBMCtl();
    }

    getDevList = () => {
        let {showDialog, toggleLoading} = this.props;
        toggleLoading(1);
        fetch('/api/server/getdevicelist', getRequest())
            .then(response => response.json())
            .then(json => {
                toggleLoading(0);
                if(json.status != 1) return showDialog(json.message);
                this.setState({
                    list: json.data.record || []
                })
            })
    }

    getBMCtl = () => {
        fetch('/api/server/getbmctl', getRequest())
            .then(response=>response.json())
            .then(json => {
                if(json.status == 1) {
                    this.setState({
                        bmctl: json.data.record || []
                    })
                }
            })
    }

    selectDevice = (id, refresh = false) => {
        if(!id) return ;
        let {showDialog, toggleLoading} = this.props;
        toggleLoading(1);
        fetch('/api/server/getdevice', getRequest({id}))
            .then(response=>response.json())
            .then(json => {
                toggleLoading(0);
                if(json.status != 1) return showDialog(json.message);
                let ipmi = json.data.rt.ipmi || [];
                let snmp = json.data.rt.snmp || [];

                let jdata = {
                        ...stateDefault().devSel,
                        id,
                        data: {
                            ipmi,
                            snmp
                        }
                    };

                if(refresh) jdata.type = this.state.devSel.type;

                this.setState({
                    devSel: jdata
                })
            })
    }
    selectDataType = (type) => {
        this.setState({
            devSel: {
                ...this.state.devSel,
                type: type
            }
        })
    }

    genSubPage = () => {
        let {i18n, showDialog, toggleLoading, callConfirm} = this.props;
        switch(this.state.devSel.type){
            case 'ipmi':
                return <IPMIPage i18n={i18n}
                    showDialog={showDialog}
                    toggleLoading={toggleLoading}
                    callConfirm={callConfirm}
                    list={this.state.devSel.data.ipmi}
                    openModal={this.openModal}
                    closeModal={this.closeModal}
                    delData={this.delData}
                    bmctl={this.state.bmctl}
                    runbmctl={this.runbmctl} />

            default:
                return null;
        }
    }

    openModal = (mtype, type = 0, data = {}) => {
        switch(mtype){
            case 'device':
                this.setState({
                    devModal: {
                        open: true,
                        type,
                        data
                    }
                })
                break;
            case 'ipmi':
                this.setState({
                    ipmiModal:{
                        open: true,
                        type,
                        data
                    }
                });
                break;
            case 'ipmiinfo':
                this.getIPMIData(data.id);
                break;
            default: 
                return null;
        }
    }

    closeModal = (mtype, cb = null) => {
        switch(mtype){
            case 'device':
                this.setState({devModal: {...stateDefault().devModal}});
                break;
            case 'ipmi':
                this.setState({ipmiModal:{...stateDefault().ipmiModal}});
                break;
            case 'ipmiinfo':
                this.setState({ipmiInfo: {...stateDefault().ipmiInfo}});
                break;
        }

        if(cb && typeof cb == 'function') cb();
    }

    submitModal = (mtype, type = 0, data = {}) => {
        if(!mtype) return ;
        let {i18n, showDialog, toggleLoading, callConfirm} = this.props;
        let url = '';
        switch(mtype){
            case 'device':
                if(type == 1 && !data.id) return showDialog('資料讀取錯誤');
                if(!data.name) return showDialog('請填寫設備名稱');
                url = type == 1 ? '/api/server/editdevice' : '/api/server/adddevice';
                fetch(url, getRequest(data))
                    .then(response => response.json())
                    .then(json => {
                        if(json.status != 1) return showDialog(json.message);
                        this.closeModal(mtype, ()=>{this.getDevList()});
                    });
                break;
            case 'ipmi':
                if(type == 1 && !data.id) return showDialog('資料讀取錯誤');
                if(!data.ip) return showDialog('請填寫IP');
                if(!data.account) return showDialog('請填寫帳號');
                if(!data.password) return showDialog('請填寫密碼');
                data.devuid = this.state.devSel.id;
                url = type == 1 ? '/api/server/editipmi' : '/api/server/addipmi';
                fetch(url, getRequest(data))
                    .then(response=>response.json())
                    .then(json => {
                        if(json.status != 1) return showDialog(json.message);
                        this.closeModal(mtype, ()=>{ this.selectDevice(this.state.devSel.id, true); })
                    })
            default :
                return null;
        }
    }

    delData = (mtype, id) => {
        if(!mtype || !id) return ;
        let {i18n, showDialog, toggleLoading, callConfirm} = this.props;
        switch(mtype) {
            case 'device':
                callConfirm('確定刪除此裝置?', ()=>{
                    fetch('/api/server/deldevice', getRequest({id}))
                        .then(response=>response.json())
                        .then(json => {
                            if(json.status != 1) return showDialog(json.message);
                            this.getDevList();
                        })
                });
                break;
            case 'ipmi':
                callConfirm('確定刪除此筆設定?', ()=>{
                    fetch('/api/server/delipmi', getRequest({id}))
                        .then(response=>response.json())
                        .then(json => {
                            if(json.status != 1) return showDialog(json.message);
                            this.selectDevice(this.state.devSel.id, true);
                        });
                });
                break;
        }
    }

    getIPMIData = (id) => {
        if(!id) return ;
        let {i18n, showDialog, toggleLoading, callConfirm} = this.props;
        toggleLoading(1);
        fetch('/api/server/getipmiinfo', getRequest({id}))
            .then(response=>response.json())
            .then(json => {
                toggleLoading(0);
                if(json.status != 1) return showDialog(json.message);
                let ipmi = json.data.record || [];
                let sensor = json.data.rt.sensor || [];
                let log = json.data.rt.log || [];
                let bmcgroup = json.data.rt.bmcgroup || [];
                let bmcdata = json.data.rt.bmcdata || [];

                this.setState({
                    ipmiInfo: {
                        open: true,
                        log,
                        sensor,
                        ipmi,
                        bmcdata,
                        bmcgroup
                    }
                })
            })
    }

    runbmctl = (ctlid, ipmuid) => {
        if(!ctlid || !ipmuid) return ;
        let {i18n, showDialog, toggleLoading, callConfirm} = this.props;
        toggleLoading(1);
        fetch('/api/server/runbmctl', getRequest({ctlid, ipmuid}))
            .then(response=>response.json())
            .then(json => {
                toggleLoading(0);
                if(json.status != 1) return showDialog(json.message);
                return showDialog('命令執行完成');
            })
    }

    render() {
        let {i18n, showDialog, toggleLoading, callConfirm} = this.props;
        return (
            <Container fluid>
                <Grid>
                    <Grid.Column width={3}>
                        <DevList i18n={i18n}
                            toggleLoading={toggleLoading}
                            showDialog={showDialog}
                            callConfirm={callConfirm}
                            sel={this.state.devSel.id}
                            selectDevice={this.selectDevice}
                            list={this.state.list}
                            openModal={this.openModal}
                            delData={this.delData} />
                    </Grid.Column>
                    <Grid.Column width={13}>
                        {
                            this.state.devSel.id != null ? 
                            (
                                <Container style={{marginBottom: '10px'}}>
                                    <Menu fluid widths={2}>
                                        <Menu.Item name="SNMP" 
                                            active={this.state.devSel.type == 'snmp'} 
                                            onClick={()=>this.selectDataType('snmp')}/>
                                        <Menu.Item name="IPMI" 
                                            active={this.state.devSel.type == 'ipmi'} 
                                            onClick={()=>this.selectDataType('ipmi')}/>
                                    </Menu>
                                </Container>
                            ) : null
                        }
                        {this.genSubPage()}
                    </Grid.Column>
                </Grid>
                <DevModal i18n={i18n}
                    open={this.state.devModal.open}
                    type={this.state.devModal.type}
                    data={this.state.devModal.data}
                    closeModal={this.closeModal}
                    submitModal={this.submitModal} />
                <IPMIModal i18n={i18n}
                    open={this.state.ipmiModal.open}
                    type={this.state.ipmiModal.type}
                    data={this.state.ipmiModal.data}
                    closeModal={this.closeModal}
                    submitModal={this.submitModal} />
                <IPMIInfoModal i18n={i18n}
                    {...this.state.ipmiInfo}
                    closeModal={this.closeModal} />
            </Container>
        )
    }
}

export default ServerPage;