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

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 stype = {
    di: {
        prefix: 'di',
        dev: '',
        op: '',
        value: '',
        mode: 'di_status'
    },
    leone: {
        prefix: 'le',
        dev: '',
        op: '',
        value: '',
        mode: ''
    },
    unit: {
        dev: ''
    },
    time: {
        op: '',
        dev: 'dt0',
        mode: 'mode0',
        year: '-',
        week: '-',
        month: '-',
        day: '-',
        hour: '-',
        min: '-'
    }
}

class UnitItem extends React.Component {

    state = {
        st: '',
        data:{}
    }

    handleDataChange = (tag, value) => {
        let {data} = this.state;
        let {updateData} = this.props;
        if(tag in data) {
            data[tag] = value;
        }

        this.setState({
            data
        }, () => {
            let {data} = this.state
            let d = {...this.props.data.data}
            let {st} = this.props.data;
            
            if(st == 'di' || st == 'leone'){
                d.id = `${data.prefix}${data.dev},${data.mode}`;
                d.op = data.op;
                d.value = data.value;
            }
            if(st == 'unit') {
                d.dev = data.dev;
            }
            if(st == 'time') {
                d.id = `${data.dev},${data.mode}`;
                d.op = data.op;
                d.value = `${data.min}|${data.hour}|${data.day}|${data.month}|${data.week}|${data.year}`;
            }

            updateData(this.props.unit, d);
        });
    }

    componentWillReceiveProps(np) {
        let data = {...this.state.data};
        
        if(np.data.st != this.state.st){
            
            if(np.data.st in stype) {
                data = {...stype[np.data.st]};
            }else {
                data = {}
            }
            
        }
        
        this.setState({
            data,
            st: np.data.st
        })
    }
    
    render() {
        let {unit, data, getList} = this.props;
        
        return (
            <Grid.Column>
                <Segment>
                    <Form.Field>
                        <label>選擇元件</label>
                        <select
                            value={data.st}
                            onChange={e => {
                            getList(unit, e.target.value);
                        }}>
                            <option value="">請選擇元件</option>
                            <option value="leone">LeOne</option>
                            <option value="di">DigitInput</option>
                            <option value="time">時間</option>
                            <option value="unit">已建立群組</option>
                        </select>
                    </Form.Field>
                    {  
                        !data.st
                        ? null
                        : (<UnitPanel data={data} state={this.state.data} dataChange={this.handleDataChange}/>)
                    }
                </Segment>
            </Grid.Column>
        )
    }
}

const UnitPanel = ({data, state, dataChange}) => {
    if (data.st == 'di') {
        return (
            <div>
                <select value={state.dev} onChange={(e) => {
                        dataChange('dev', e.target.value);
                    }}>
                    <option value="">選擇裝置</option>
                    {
                        data.list.map((t, idx) => (
                            <option key={idx} value={t.id}>{t.name}</option>
                        ))
                    }
                </select>
                <select value={state.op} onChange={e => {
                        dataChange('op', e.target.value);
                    }}>
                    <option value="">選擇條件</option>
                    {
                        ops.map((t,idx) => {
                            if(t.code == 8 || t.code == 9) return ;
                            return (<option key={idx} value={t.code}>{t.name}</option>)
                        })
                    }
                </select>
                <select value={state.value} onChange={e => {
                        dataChange('value', e.target.value);
                    }}>
                    <option value="">選擇狀態</option>
                    <option value="0">0</option>
                    <option value="1">1</option>
                </select>
            </div>
        )
    }
    if(data.st == 'leone') {
        return (
            <div>
                <select value={state.dev} onChange={e => {
                        dataChange('dev', e.target.value);
                    }}>
                    <option value="">選擇裝置</option>
                    {
                        data.list.map((t, idx) => (
                            <option key={idx} value={t.id}>{t.name}</option>
                        ))
                    }
                </select>
                <select value={state.mode} onChange={e => {
                        dataChange('mode', e.target.value);
                    }}>
                    <option value="">選擇感測器</option>
                    <option value="leone_ttrigger1">溫度</option>
                    <option value="leone_htrigger1">濕度</option>
                </select>
                <select value={state.op} onChange={e => {
                        dataChange('op', e.target.value);
                    }}>
                    <option value="">選擇條件</option>
                    {
                        ops.map((t,idx) => {
                            if(t.code == 8 || t.code == 9) return ;
                            return (<option key={idx} value={t.code}>{t.name}</option>)
                        })
                    }
                </select>
                <Input size="mini" placeholder="請輸入數值" value={state.value} onChange={(e,d) => {
                        dataChange('value', d.value);
                    }} />
            </div>
        )
    }
    if(data.st == 'unit') {
        return (
            <div>
                <select value={state.dev} onChange={e => {
                        dataChange('dev', e.target.value);
                    }}>
                    <option value="">選擇群組</option>
                    {
                        data.list.map((t,idx) => (
                            <option key={idx} value={t.id}>{t.name}</option>
                        ))
                    }
                </select>
            </div>
        )
    }
    if(data.st == 'time') {
        return (
            <div>
                <select value={state.op} onChange={e => {
                        dataChange('op', e.target.value);
                    }}>
                    <option value="">選擇條件</option>
                    {
                        ops.map((t,idx) => {
                            if(t.code == 8 || t.code == 9) return ;
                            return (<option key={idx} value={t.code}>{t.name}</option>)
                        })
                    }
                </select>
                <Input size="mini" placeholder="年(不指定請留空)" value={state.year == '-' ? '' : state.year} onChange={(e,d) => {
                        dataChange('year', d.value.length == 0 ? '-' : d.value);
                    }} />
                <Input size="mini" placeholder="週(不指定請留空)" value={state.week == '-' ? '' : state.week} onChange={(e,d) => {
                        dataChange('week', d.value.length == 0 ? '-' : d.value);
                    }} />
                <Input size="mini" placeholder="月(不指定請留空)" value={state.month == '-' ? '' : state.month} onChange={(e,d) => {
                        dataChange('month', d.value.length == 0 ? '-' : d.value);
                    }} />
                <Input size="mini" placeholder="日(不指定請留空)" value={state.day == '-' ? '' : state.day} onChange={(e,d) => {
                        dataChange('day', d.value.length == 0 ? '-' : d.value);
                    }} />
                <Input size="mini" placeholder="時(不指定請留空)" value={state.hour == '-' ? '' : state.hour} onChange={(e,d) => {
                        dataChange('hour', d.value.length == 0 ? '-' : d.value);
                    }} />
                <Input size="mini" placeholder="分(不指定請留空)" value={state.min == '-' ? '' : state.min} onChange={(e,d) => {
                        dataChange('min', d.value.length == 0 ? '-' : d.value);
                    }} />
            </div>
        )
    }

    return null;
}

export default UnitItem;