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

const ops = [
    {
        "code": "0",
        "name": "等於"
    }, {
        "code": "1",
        "name": "大於"
    }, {
        "code": "2",
        "name": "小於"
    }, {
        "code": "3",
        "name": "大於等於"
    }, {
        "code": "4",
        "name": "小於等於"
    }, {
        "code": "5",
        "name": "不等於"
    }, {
        "code": "8",
        "name": "AND"
    }, {
        "code": "9",
        "name": "OR"
    }
];

const stateDefault = () => ({
    id1: {
        unit: '',
        data: {}
    },
    id2: {
        unit: '',
        data: {}
    }
})

const lcDef = () => ({
    type: 'lc',
    id: '',
    op: '',
    value: ''
})

const lnDef = () => ({
    type: 'ln',
    dev: ''
})

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

    changeUnitType = (id, type) => {
        let st = this.state;
        if(id in st){
            st[id].unit = type;
            if(type == ''){
                st[id].data = {}
            }else if(type == 'unit'){
                st[id].data = {...lnDef()}
            }else {
                st[id].data = {...lcDef()}
            }
            this.setState({
                ...st
            })
        }
    }

    updateData = (id, data) => {
        let st = this.state;
        if(id in st) {
            st[id].data = data;
            this.setState({
                ...st
            })
        }
    }

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

    joinGroup = () => {
        console.log(this.state);
    }

    render() {
        let {i18n, showDialog, toggleLoading} = this.props;
        return (
            <Segment color="red">
                <Form.Field>
                    <Input label="節點名稱" />
                </Form.Field>
                <Form.Field>
                    <label>觸發條件</label>
                    <select>
                        <option value="">請選擇觸發條件</option>
                        {
                            ops.map((t,idx) => {
                                if(t.code == 8 || t.code == 9) {
                                    return (
                                        <option key={idx} value={t.code}>{t.name}</option>
                                    )
                                }
                            })
                        }
                    </select>
                </Form.Field>
                <Grid columns={2} padded>
                    <Grid.Column>
                        <Unit i18n={i18n} id="id1" 
                            data={this.state.id1} 
                            groups={this.props.groups} 
                            ops={ops} 
                            toggleLoading={toggleLoading} 
                            showDialog={showDialog} 
                            updateData={this.updateData}
                            changeUnitType={this.changeUnitType}/>
                    </Grid.Column>
                    <Grid.Column>
                        <Unit i18n={i18n} id="id2" 
                            data={this.state.id2} 
                            groups={this.props.groups} 
                            ops={ops} 
                            toggleLoading={toggleLoading} 
                            showDialog={showDialog} 
                            updateData={this.updateData}
                            changeUnitType={this.changeUnitType}/>
                    </Grid.Column>
                </Grid>
                <div style={{textAlign: 'right'}}>
                    <Button content="加入" basic size="mini" color="blue" onClick={()=>{this.joinGroup()}} />
                    <Button content="清除" basic size="mini" color="red" onClick={()=>{this.clearField()}} />
                </div>
            </Segment>
        )
    }
}

export default ConditionField;