import React from 'react';
import ReactDOM from 'react-dom';
import { Modal, List, Menu, Button, Input, Label } from 'semantic-ui-react';
import Datetime from 'react-datetime';
import {convertTime, padding} from '../../../../tools'

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

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

    componentDidMount(){

    }

    closeView = () => {
        this.setState({
            list: [],
            stime: (getDayTime()),
            etime: (Date.now())
        }, ()=>{
            this.props.closeModal();
        })
    }

    getList = () => {
        let {mac, showDialog, getRequest} = this.props;
        fetch('/api/wristband/getwristbandlocpath', getRequest({
            mac,
            stime: Math.floor(this.state.stime / 1000),
            etime: Math.floor(this.state.etime / 1000)
            }))
            .then(response=>response.json())
            .then(json => {
                if(json.status != 1) return showDialog(json.message);
                this.setState({
                    list: json.data.record || []
                })
            })
    }

    render() {
        let {closeModal, open} = this.props;
        return (
            <Modal open={open} onClose={()=>{this.closeView()}}>
                <Modal.Header>
                    手環名稱: {this.props.wbname}
                </Modal.Header>
                <Modal.Content>
                    <Menu>
                        <Menu.Item>
                            <Input label="起始時間" input={
                            <Datetime dateFormat="YYYY-MM-DD" 
                                timeFormat="HH:mm" 
                                value={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={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.getList()}} />
                            </Menu.Item>
                        </Menu.Menu>
                    </Menu>
                    <List divided>
                        {
                            this.state.list.map((t,idx) => {
                                return (
                                    <List.Item key={idx}>
                                        {
                                            t.devname ? 
                                            `時間 ${convertTime(t.wloclogtst, true)} 位於 ${t.devname} 附近` : 
                                            `時間 ${convertTime(t.wloclogtst, true)} 不在範圍內`
                                        }
                                    </List.Item>
                                )
                            })
                        }
                    </List>
                </Modal.Content>
            </Modal>
        )
    }
}

export default WristbandPathInfo;