import React from 'react';
import {Segment, Input, Form} from 'semantic-ui-react';
import UnitLeone from './UnitLeone';
import UnitDigitalInput from './UnitDigitalInput';
import UnitTime from './UnitTime';
import UnitGroups from './UnitGroups';
import UnitModbus from './UnitModbus';

class Unit extends React.Component {

    handleChangeUnit = (val) => {
        this.props.changeUnitType(this.props.id, val);
    }

    getUnitComponent = () => {
        
        let {data, ops, i18n, showDialog, toggleLoading, groups} = this.props;

        switch(data.unit){
            case 'leone':
                return <UnitLeone ops={ops} data={data.data} i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} updateData={this.updateData} />
            case 'di':
                return <UnitDigitalInput ops={ops} data={data.data} i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} updateData={this.updateData} />
            case 'modbus':
                return <UnitModbus ops={ops} data={data.data} i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} updateData={this.updateData} />
            case 'time':
                return <UnitTime ops={ops} data={data.data} i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} updateData={this.updateData} />
            case 'unit':
                return <UnitGroups i18n={i18n} data={data.data} groups={groups} updateData={this.updateData} />
            default: 
                return null;
        }
    }

    updateData = (data) => {
        console.log(data);
        this.props.updateData(this.props.id, data);
    }

    render() {
        let {ops, id} = this.props;
        return (
            <Segment>
                <Form.Field>
                    <label>選擇元件</label>
                    <select value={this.props.data.unit} onChange={e => {
                            this.handleChangeUnit(e.target.value);
                        }}>
                        <option value="">請選擇元件</option>
                        <option value="leone">LeOne</option>
                        <option value="di">DigitalInput</option>
                        <option value="modbus">Modbus</option>
                        <option value="time">時間</option>
                        <option value="unit">已建立群組</option>
                    </select>
                </Form.Field>
                {this.getUnitComponent()}
            </Segment>
        )
    }
}

export default Unit;