import React from 'react';
import {Segment, Button, Form, Input} from 'semantic-ui-react';
import UnitLeone from './UnitLeone';
import UnitDigitalOutput from './UnitDigitalOutput';
import UnitIOGroup from './UnitIOGroup';
import UnitModbus from './UnitModbus';

const stateDefault = () => ({
    unit: '',
    act: {
        type: '',
        dev: '',
        devName: '',
        act: '',
        actName: ''
    }
})

class ActionSelect extends React.Component {

    state = {
        ...stateDefault()
    }

    changeUnit = (unit) => {
        this.setState({
            unit
        })
    }

    getUnitComponent = () => {
        let {unit} = this.state;
        let {i18n, showDialog, toggleLoading} = this.props;

        switch(unit){
            case 'leone':
                return (
                    <UnitLeone i18n={i18n}
                        data={this.state.act}
                        showDialog={showDialog}
                        toggleLoading={toggleLoading}
                        updateData={this.updateData} />
                )
            case 'do':
                return (
                    <UnitDigitalOutput i18n={i18n}
                        data={this.state.act}
                        showDialog={showDialog}
                        toggleLoading={toggleLoading}
                        updateData={this.updateData} />
                )
            case 'iogroup':
                return (
                    <UnitIOGroup i18n={i18n}
                        data={this.state.act}
                        showDialog={showDialog}
                        toggleLoading={toggleLoading}
                        updateData={this.updateData} />
                )
            case 'modbus':
                return (
                    <UnitModbus i18n={i18n}
                        data={this.state.act}
                        showDialog={showDialog}
                        toggleLoading={toggleLoading}
                        updateData={this.updateData} />
                )
            default: 
                return null;
        }
    }

    updateData = (data) => {
        let {act} = this.state;
        for(let i in act){
            act[i] = data[i] || ''
        }
        this.setState({
            act
        })
    }

    addAction = () => {
        let {dev, devName, act, actName, type} = this.state.act;
        let {showDialog} = this.props;
        if(!dev || !act) return showDialog('請選擇動作資料');
        if(type != 'modbus'){
            let acts = act.split(',');
            if(acts.length != 2 ) return showDialog('請選擇正確的動作');
            if(acts[0] == '2'){
                if(acts[1] < 16 || acts[1] > 30) return showDialog('冷氣溫度請介於16-30間');
            }
        }
        if(type == 'modbus'){
            let acts = act.split(',');
            if(acts.length != 3) return showDialog('請把動作資料填寫完成');
            if(acts[0] == '' || acts[1] == '' || acts[2] == '') return showDialog('請把動作資料填寫完成');
        }

        this.props.addNewAction({
            dev,devName,act,actName,type
        }, this.clearField);
    }

    clearField = () => {
        this.setState({
            ...stateDefault()
        })
    }

    render() {

        return (
            <Segment color="green">
                <Form.Field>
                    <label>選擇裝置類型</label>
                    <select value={this.state.unit} onChange={e=>{this.changeUnit(e.target.value)}}>
                        <option value="">裝置類型</option>
                        <option value="leone">LeOne</option>
                        <option value="do">DigitalOutput</option>
                        <option value="iogroup">IOGroup</option>
                        <option value="modbus">Modbus</option>
                    </select>
                </Form.Field>
                {this.getUnitComponent()}
                <div style={{textAlign:'right', marginTop: '20px'}}>
                    <Button content="加入" basic size="mini" color="blue" onClick={()=>{ this.addAction() }} />
                    <Button content="清除" basic size="mini" color="red" onClick={()=>{this.clearField()}} />
                </div>
            </Segment>
        )
    }
}

export default ActionSelect;