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

class UnitLeone extends React.Component {
    state = {
        list: [],
        data: {
            id: '',
            op: '',
            mode: '',
            value: ''
        }
    }

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

        toggleLoading(1);
        fetch('/api/system/getselectlist', getRequest({type: 'leone'}))
            .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.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 mode = np.data.id.split(',')[1];
        if(id != data.id) data.id = id;
        if(mode != data.mode) data.mode = mode;

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

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

        this.setState({
            data: {...data}
        }, ()=>{ this.sendUpdate() });
    }

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

    render() {
        let {ops} = 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.mode} onChange={e=>{this.changeState('mode', e.target.value)}}>
                    <option value="">選擇感測器</option>
                    <option value="leone_ttrigger1">溫度</option>
                    <option value="leone_htrigger1">濕度</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 placeholder="請輸入數值" value={this.state.data.value} onChange={(e, d)=>{this.changeState('value', d.value)}} />
            </div>
        )
    }
}

export default UnitLeone;