import React from 'react';
import {Input} from 'semantic-ui-react';
import {getRequest} from '../../../../../actions';

class UnitDigitalInput extends React.Component {
    state = {
        list: [],
        typelist: [],
        portlist: [],
        data: {
            id: '',
            op: '',
            type: '',
            port: '',
            value: ''
        }
    }

    componentDidMount(){
        let {showDialog, toggleLoading} = this.props;

        toggleLoading(1);
        fetch('/api/system/getselectlist', getRequest({type: 'modbus'}))
            .then(response=>response.json())
            .then(json=>{
                toggleLoading(0);
                if(json.status != 1) return showDialog(json.message);
                this.setState({
                    list: json.data.record || []
                })
            })
    }

    componentWillReceiveProps(np) {
        let data = {...this.state.data};
        // if(np.data.id != data.id) data.id = np.data.id;
        if(np.data.op != data.op) data.op = np.data.op;
        if(np.data.value != data.value) data.value = np.data.op;

        let id = (np.data.id || '').split(',')[0];
        let type = ((np.data.id || '').split(',')[1] || '').split('|')[0] || '';
        let port = ((np.data.id || '').split(',')[1] || '').split('|')[1] || '';

        if(data.id != id ) data.id = id;
        if(data.type != type ) data.type = type;
        if(data.port != port ) data.port = port;

        this.setState({
            data: {...data}
        })
    }

    getDevTypes = (id) => {
        if(!id) return ;
        let {i18n, showDialog} = this.props;
        let typelist = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.porttype') : [];
        fetch('/api/modbus/getmodbustype', getRequest({id}))
            .then(response=>response.json())
            .then(json => {
                if(json.status != 1) return showDialog(json.message);
                let arr = json.data.record || [];
                for(let i in arr){
                    for(let j in typelist) {
                        if(arr[i].type == typelist[j].code){
                            arr[i].name = typelist[j].name;
                        }
                    }
                }

                this.setState({
                    typelist: arr, 
                    portlist: [],
                    data: {
                        ...this.state.data,
                        type: '',
                        port: ''
                    }
                })
            })
    }

    getDevPorts = (id, type) => {
        if(!id || !type) return ;
        let {i18n, showDialog} = this.props;
        let mid = '';
        let m = id.match(/(\d+)/);
        if(m != null && m.length>1) mid = m[1];
        fetch('/api/modbus/getmodbusport', getRequest({id: mid, type}))
            .then(response=>response.json())
            .then(json => {
                if(json.status != 1) return showDialog(json.message);
                let arr = json.data.record || [];

                this.setState({
                    portlist: arr,
                    data: {
                        ...this.state.data,
                        port: ''
                    }
                })
            })
    }

    changeState = (key, value) => {
        let data = {
            ...this.state.data
        }
        if(key == 'dev') {
            data.id = value == '' ? '' : `mb${value}`;
        }
        if(key == 'op'){
            data.op = value;
        }
        if(key == 'type') {
            data.type = value
        }
        if(key == 'port') {
            data.port = value
        }
        if(key == 'value') {
            data.value = value;
        }

        this.setState({
            data: {...data}
        }, ()=>{ 
            if(key == 'dev'){
                this.getDevTypes(value);
            }
            if(key == 'type'){
                this.getDevPorts(this.state.data.id, this.state.data.type)
            }
            this.sendUpdate()
        });
    }

    sendUpdate = () => {
        let data = {...this.state.data};
        data.id = `${data.id},${data.type}|${data.port}`;
        delete data.type;
        delete data.port;
        delete data.dev;
        this.props.updateData({...this.props.data, ...data});
    }

    render() {
        let {ops, i18n} = this.props;
        let id = '';
        if(this.state.data.id != '') {
            let m = this.state.data.id.match(/(\d+)/);
            if(m != null && m.length > 1){
                id = m[1];
            }
        }
        
        return (
            <div>
                <select value={id} onChange={e => {this.changeState('dev', e.target.value)}}>
                    <option value="">選擇裝置</option>
                    {
                        this.state.list.map((t,idx) => (
                            <option key={idx} value={t.id}>{t.name}</option>
                        ))
                    }
                </select>
                <select value={this.state.data.type} onChange={e => {this.changeState('type', e.target.value)}}>
                    <option value="">接口類型</option>
                    {
                        this.state.typelist.map((t,idx) => (
                            <option key={idx} value={t.type}>{t.name}</option>
                        ))
                    }
                </select>
                <select value={this.state.data.port} onChange={e => {this.changeState('port', e.target.value)}}>
                    <option value="">接口</option>
                    {
                        this.state.portlist.map((t,idx) => (
                            <option key={idx} value={t.portnum}>{`Port ${t.portnum} ${t.name ? ` - ${t.name}` : '' }`}</option>
                        ))
                    }
                </select>
                <select value={this.state.data.op} onChange={e => {this.changeState('op', e.target.value)}}>
                    <option value="">選擇條件</option>
                    {
                        ops.map((t,idx) => {
                            if(t.code != 8 && t.code != 9) {
                                return (
                                    <option value={t.code} key={idx}>{t.name}</option>
                                )
                            }
                        })
                    }
                </select>
                <Input label="請輸入數值" value={this.state.data.value} onChange={(e,d)=>{this.changeState('value', d.value)}} />
            </div>
        )
    }
}

export default UnitDigitalInput;