import React from 'react';
import {Form, Button, Input, Segment} from 'semantic-ui-react';

class ActionSelect extends React.Component{
    state = {
        showTemp: false,
        temp: '0'
    }

    checkShowTemp = (cmd = '') => {
        let c = cmd;
        let cs = c.split(' ');
        let showTemp = false;
        if(cs[0] == 2) {
            showTemp = true;
        }

        this.setState({
            showTemp
        });
    }

    updateTemp = (temp) => {
        this.setState({
            temp
        })
    }

    render(){
        let {i18n,list, unit, getList, addAction} = this.props;
        let actlist = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.action_list') : [];
        return (
            <Form.Field>
                <label>加入動作</label>
                <Segment color="green" className="clearfix">
                    <Form.Group inline>
                        <Form.Field>
                            <label>選擇裝置</label>
                            <select ref="devType" onChange={e=>{
                                    getList(unit, e.target.value);
                                }}>
                                <option value="">選擇裝置類型</option>
                                <option value="do">DigitOutput</option>
                                <option value="leone">LeOne</option>
                                <option value="iogroup">IOGroup</option>
                            </select>
                        </Form.Field>
                        <Form.Field>
                            <select ref="devName">
                                <option value="">選擇裝置</option>
                                {
                                    list.map((t,idx)=>(<option key={idx} value={t.id}>{t.name}</option>))
                                }
                            </select>
                        </Form.Field>
                    </Form.Group>
                    <Form.Group inline>
                        <Form.Field>
                            <label>選擇動作</label>
                            <select ref="act" onChange={e=>{
                                    this.checkShowTemp(e.target.value);
                                }}>
                                <option value="">選擇動作</option>
                                {
                                    actlist.map((t,idx) => (
                                        <option key={idx} value={t.cmd}>{t.name}</option>
                                    ))
                                }
                            </select>
                        </Form.Field>
                        {
                            this.state.showTemp ? 
                            (
                                <Form.Field>
                                    <Input size="mini" placeholder="請輸入溫度" value={this.state.temp} onChange={(e,d) => {
                                        this.updateTemp(d.value);
                                    }} />
                                </Form.Field>
                            ) : null
                        }
                    </Form.Group>
                    <Button floated="right" content="加入動作" size="tiny" basic color="orange" onClick={()=>{
                            let type = this.refs.devType.value;
                            let dev = this.refs.devName.value;
                            let devName = this.refs.devName.options[this.refs.devName.selectedIndex].innerHTML;
                            let act = this.refs.act.value;
                            let actName = this.refs.act.options[this.refs.act.selectedIndex].innerHTML;
                            let temp = this.state.temp;
                            let prefix = '';

                            switch(type){
                                case 'do':
                                    prefix = 'do';
                                    break;
                                case 'leone':
                                    prefix = 'le';
                                    break;
                                case 'iogroup': 
                                    prefix = 'iogroup';
                                    break;
                                default: 
                                    return addAction(null);
                            }

                            if(!act) return addAction(null);
                            if(act == 2) {
                                act = `${act} ${temp}`;
                                actName += ` ${temp}`;
                            }

                            let data = {
                                id: `${prefix}${dev}`,
                                act,
                                actName,
                                devName
                            };

                            return addAction(data);

                        }} />
                </Segment>
            </Form.Field>
        )
    }
}

export default ActionSelect;