import React from 'react';
import {Container, Menu, Grid, Button, Input, Segment, Table} from 'semantic-ui-react';
import DeviceList from './DeviceList';
import {convertTime} from '../../../tools';
import Datetime from 'react-datetime';
import LogPanel from './LogPanel';

let getDayTime = () => {
    let date = new Date();
    date.setHours(0,0,0,0);
    return date.getTime();
}

class ModbusLogPage extends React.Component {
    state = {
        selected: [],
        stime: getDayTime(),
        etime: Date.now()
    }

    toggleSelect = (id) => {
        let selected = [...this.state.selected];
        let idx = selected.indexOf(id);
        if(idx == -1) selected.push(id);
        else selected.splice(idx, 1);

        this.setState({
            selected
        })
    }

    getLogList = () => {
        let ids = [...this.state.selected];
        let data = {
            ids, 
            stime: Math.floor(this.state.stime /1000),
            etime: Math.floor(this.state.etime)
        }

        if(ids.length == 0) return this.props.showDialog('請選擇裝置');

        this.props.getMBLog(data);
    }

    componentDidMount(){
        this.props.getList();

        this.props.router.setRouteLeaveHook(this.props.route, () => {
			this.props.clearList();
		});
    }

    render(){
        let {i18n, list, log} = this.props;

        return (
            <Container>
                <Menu>
                    <Menu.Item>
                        <Input label="起始時間" input={
                        <Datetime dateFormat="YYYY-MM-DD" 
                            timeFormat="HH:mm" 
                            value={convertTime(this.state.stime)} 
                            input={true}
                            onChange={(e)=>{ this.setState({stime: e.valueOf()}) }} />
                        }/>
                    </Menu.Item>
                    <Menu.Item>
                        <Input label="結束時間" input={
                        <Datetime dateFormat="YYYY-MM-DD" 
                            timeFormat="HH:mm" 
                            value={convertTime(this.state.etime)} 
                            input={true}
                            onChange={(e)=>{ this.setState({etime: e.valueOf()}) }} />
                        }/>
                    </Menu.Item>
                    <Menu.Menu position="right">
                        <Menu.Item>
                            <Button type="button" content="搜尋" size="tiny" basic onClick={()=>{this.getLogList()}} />
                        </Menu.Item>
                    </Menu.Menu>
                </Menu>
				<Grid>
					<Grid.Column width={4}>
						<DeviceList i18n={i18n}
                            list={list}
                            selected={this.state.selected}
                            toggleSelect={this.toggleSelect}
                            />
					</Grid.Column>
					<Grid.Column width={12}>
						<LogPanel i18n={i18n} 
                            log={log} />
					</Grid.Column>
				</Grid>
			</Container>
        )
    }
}

export default ModbusLogPage;